<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 5.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha256-xejo6yLi6vGtAjcMIsY8BHdKsLg7QynVlFMzdQgUuy8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"gz1234.gitee.io","root":"/","images":"/images","scheme":"Gemini","darkmode":true,"version":"8.12.3","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"flat"},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="代码风格结构缩进[强制] 使用 2 个空格做为一个缩进层级[强制] switch 下的 case 和 default 必须增加一个缩进层级示例： 12345678910111213141516171819202122232425262728293031&#x2F;&#x2F; goodswitch (variable) &amp;#123;    case &amp;#x27;1&amp;#x27;:        &#x2F;&#x2F; do...">
<meta property="og:type" content="website">
<meta property="og:title" content="郭泽">
<meta property="og:url" content="https://gz1234.gitee.io/spec-master/JavaScript%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83.html">
<meta property="og:site_name" content="郭泽">
<meta property="og:description" content="代码风格结构缩进[强制] 使用 2 个空格做为一个缩进层级[强制] switch 下的 case 和 default 必须增加一个缩进层级示例： 12345678910111213141516171819202122232425262728293031&#x2F;&#x2F; goodswitch (variable) &amp;#123;    case &amp;#x27;1&amp;#x27;:        &#x2F;&#x2F; do...">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-05-31T01:02:23.826Z">
<meta property="article:modified_time" content="2023-05-31T01:02:23.826Z">
<meta property="article:author" content="郭泽">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="https://gz1234.gitee.io/spec-master/JavaScript%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":false,"lang":"zh-CN","comments":true,"permalink":"https://gz1234.gitee.io/spec-master/JavaScript%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83.html","path":"spec-master/JavaScript代码规范.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title> | 郭泽
</title>
  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">郭泽</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC"><span class="nav-number">1.</span> <span class="nav-text">代码风格</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%93%E6%9E%84"><span class="nav-number">1.1.</span> <span class="nav-text">结构</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%BC%A9%E8%BF%9B"><span class="nav-number">1.1.1.</span> <span class="nav-text">缩进</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-2-%E4%B8%AA%E7%A9%BA%E6%A0%BC%E5%81%9A%E4%B8%BA%E4%B8%80%E4%B8%AA%E7%BC%A9%E8%BF%9B%E5%B1%82%E7%BA%A7"><span class="nav-number">1.1.1.1.</span> <span class="nav-text">[强制] 使用 2 个空格做为一个缩进层级</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-switch-%E4%B8%8B%E7%9A%84-case-%E5%92%8C-default-%E5%BF%85%E9%A1%BB%E5%A2%9E%E5%8A%A0%E4%B8%80%E4%B8%AA%E7%BC%A9%E8%BF%9B%E5%B1%82%E7%BA%A7"><span class="nav-number">1.1.1.2.</span> <span class="nav-text">[强制] switch 下的 case 和 default 必须增加一个缩进层级</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.</span> <span class="nav-text">空格</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BA%8C%E5%85%83%E8%BF%90%E7%AE%97%E7%AC%A6%E4%B8%A4%E4%BE%A7%E5%BF%85%E9%A1%BB%E6%9C%89%E4%B8%80%E4%B8%AA%E7%A9%BA%E6%A0%BC%EF%BC%8C%E4%B8%80%E5%85%83%E8%BF%90%E7%AE%97%E7%AC%A6%E4%B8%8E%E6%93%8D%E4%BD%9C%E5%AF%B9%E8%B1%A1%E4%B9%8B%E9%97%B4%E4%B8%8D%E5%85%81%E8%AE%B8%E6%9C%89%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.1.</span> <span class="nav-text">[强制] 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%94%A8%E4%BD%9C%E4%BB%A3%E7%A0%81%E5%9D%97%E8%B5%B7%E5%A7%8B%E7%9A%84%E5%B7%A6%E8%8A%B1%E6%8B%AC%E5%8F%B7-%E5%89%8D%E5%BF%85%E9%A1%BB%E6%9C%89%E4%B8%80%E4%B8%AA%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.2.</span> <span class="nav-text">[强制] 用作代码块起始的左花括号 &amp;#123; 前必须有一个空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-if-else-for-while-function-switch-do-try-catch-finally-%E5%85%B3%E9%94%AE%E5%AD%97%E5%90%8E%EF%BC%8C%E5%BF%85%E9%A1%BB%E6%9C%89%E4%B8%80%E4%B8%AA%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.3.</span> <span class="nav-text">[强制] if &#x2F; else &#x2F; for &#x2F; while &#x2F; function &#x2F; switch &#x2F; do &#x2F; try &#x2F; catch &#x2F; finally 关键字后，必须有一个空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%9C%A8%E5%AF%B9%E8%B1%A1%E5%88%9B%E5%BB%BA%E6%97%B6%EF%BC%8C%E5%B1%9E%E6%80%A7%E4%B8%AD%E7%9A%84-%E4%B9%8B%E5%90%8E%E5%BF%85%E9%A1%BB%E6%9C%89%E7%A9%BA%E6%A0%BC%EF%BC%8C-%E4%B9%8B%E5%89%8D%E4%B8%8D%E5%85%81%E8%AE%B8%E6%9C%89%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.4.</span> <span class="nav-text">[强制] 在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%87%BD%E6%95%B0%E5%A3%B0%E6%98%8E%E3%80%81%E5%85%B7%E5%90%8D%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%E3%80%81%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%E4%B8%AD%EF%BC%8C%E5%87%BD%E6%95%B0%E5%90%8D%E5%92%8C-%E4%B9%8B%E9%97%B4%E4%B8%8D%E5%85%81%E8%AE%B8%E6%9C%89%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.5.</span> <span class="nav-text">[强制] 函数声明、具名函数表达式、函数调用中，函数名和 ( 之间不允许有空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%92%8C-%E5%89%8D%E4%B8%8D%E5%85%81%E8%AE%B8%E6%9C%89%E7%A9%BA%E6%A0%BC%E3%80%82%E5%A6%82%E6%9E%9C%E4%B8%8D%E4%BD%8D%E4%BA%8E%E8%A1%8C%E5%B0%BE%EF%BC%8C-%E5%92%8C-%E5%90%8E%E5%BF%85%E9%A1%BB%E8%B7%9F%E4%B8%80%E4%B8%AA%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.6.</span> <span class="nav-text">[强制] , 和 ; 前不允许有空格。如果不位于行尾，, 和 ; 后必须跟一个空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%9C%A8%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%E3%80%81%E5%87%BD%E6%95%B0%E5%A3%B0%E6%98%8E%E3%80%81%E6%8B%AC%E5%8F%B7%E8%A1%A8%E8%BE%BE%E5%BC%8F%E3%80%81%E5%B1%9E%E6%80%A7%E8%AE%BF%E9%97%AE%E3%80%81if-for-while-switch-catch-%E7%AD%89%E8%AF%AD%E5%8F%A5%E4%B8%AD%EF%BC%8C-%E5%92%8C-%E5%86%85%E7%B4%A7%E8%B4%B4%E6%8B%AC%E5%8F%B7%E9%83%A8%E5%88%86%E4%B8%8D%E5%85%81%E8%AE%B8%E6%9C%89%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.7.</span> <span class="nav-text">[强制] 在函数调用、函数声明、括号表达式、属性访问、if &#x2F; for &#x2F; while &#x2F; switch &#x2F; catch 等语句中，() 和 [] 内紧贴括号部分不允许有空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%8D%95%E8%A1%8C%E5%A3%B0%E6%98%8E%E7%9A%84%E6%95%B0%E7%BB%84%E4%B8%8E%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%8C%85%E5%90%AB%E5%85%83%E7%B4%A0%EF%BC%8C-%E5%92%8C-%E5%86%85%E7%B4%A7%E8%B4%B4%E6%8B%AC%E5%8F%B7%E9%83%A8%E5%88%86%E4%B8%8D%E5%85%81%E8%AE%B8%E5%8C%85%E5%90%AB%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.8.</span> <span class="nav-text">[强制] 单行声明的数组与对象，如果包含元素，&amp;#123;&amp;#125; 和 [] 内紧贴括号部分不允许包含空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E8%A1%8C%E5%B0%BE%E4%B8%8D%E5%BE%97%E6%9C%89%E5%A4%9A%E4%BD%99%E7%9A%84%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.9.</span> <span class="nav-text">[强制] 行尾不得有多余的空格</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8D%A2%E8%A1%8C"><span class="nav-number">1.1.3.</span> <span class="nav-text">换行</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E6%AF%8F%E4%B8%AA%E7%8B%AC%E7%AB%8B%E8%AF%AD%E5%8F%A5%E7%BB%93%E6%9D%9F%E5%90%8E%E5%BF%85%E9%A1%BB%E6%8D%A2%E8%A1%8C"><span class="nav-number">1.1.3.1.</span> <span class="nav-text">[强制] 每个独立语句结束后必须换行</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E6%AF%8F%E8%A1%8C%E4%B8%8D%E5%BE%97%E8%B6%85%E8%BF%87-120-%E4%B8%AA%E5%AD%97%E7%AC%A6"><span class="nav-number">1.1.3.2.</span> <span class="nav-text">[强制] 每行不得超过 120 个字符</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E8%BF%90%E7%AE%97%E7%AC%A6%E5%A4%84%E6%8D%A2%E8%A1%8C%E6%97%B6%EF%BC%8C%E8%BF%90%E7%AE%97%E7%AC%A6%E5%BF%85%E9%A1%BB%E5%9C%A8%E6%96%B0%E8%A1%8C%E7%9A%84%E8%A1%8C%E9%A6%96"><span class="nav-number">1.1.3.3.</span> <span class="nav-text">[强制] 运算符处换行时，运算符必须在新行的行首</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%9C%A8%E5%87%BD%E6%95%B0%E5%A3%B0%E6%98%8E%E3%80%81%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%E3%80%81%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%E3%80%81%E5%AF%B9%E8%B1%A1%E5%88%9B%E5%BB%BA%E3%80%81%E6%95%B0%E7%BB%84%E5%88%9B%E5%BB%BA%E3%80%81for-%E8%AF%AD%E5%8F%A5%E7%AD%89%E5%9C%BA%E6%99%AF%E4%B8%AD%EF%BC%8C%E4%B8%8D%E5%85%81%E8%AE%B8%E5%9C%A8-%E6%88%96-%E5%89%8D%E6%8D%A2%E8%A1%8C"><span class="nav-number">1.1.3.4.</span> <span class="nav-text">[强制] 在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中，不允许在 , 或 ; 前换行</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%B8%8D%E5%90%8C%E8%A1%8C%E4%B8%BA%E6%88%96%E9%80%BB%E8%BE%91%E7%9A%84%E8%AF%AD%E5%8F%A5%E9%9B%86%EF%BC%8C%E4%BD%BF%E7%94%A8%E7%A9%BA%E8%A1%8C%E9%9A%94%E5%BC%80%EF%BC%8C%E6%9B%B4%E6%98%93%E9%98%85%E8%AF%BB"><span class="nav-number">1.1.3.5.</span> <span class="nav-text">[建议] 不同行为或逻辑的语句集，使用空行隔开，更易阅读</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%9C%A8%E8%AF%AD%E5%8F%A5%E7%9A%84%E8%A1%8C%E9%95%BF%E5%BA%A6%E8%B6%85%E8%BF%87-120-%E6%97%B6%EF%BC%8C%E6%A0%B9%E6%8D%AE%E9%80%BB%E8%BE%91%E6%9D%A1%E4%BB%B6%E5%90%88%E7%90%86%E7%BC%A9%E8%BF%9B"><span class="nav-number">1.1.3.6.</span> <span class="nav-text">[建议] 在语句的行长度超过 120 时，根据逻辑条件合理缩进</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E4%BA%8E-if-else-%E3%80%81try-catch-finally-%E7%AD%89%E8%AF%AD%E5%8F%A5%EF%BC%8C%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E5%9C%A8-%E5%8F%B7%E5%90%8E%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%8D%A2%E8%A1%8C-%E7%9A%84%E9%A3%8E%E6%A0%BC%EF%BC%8C%E4%BD%BF%E4%BB%A3%E7%A0%81%E5%B1%82%E6%AC%A1%E7%BB%93%E6%9E%84%E6%9B%B4%E6%B8%85%E6%99%B0%EF%BC%8C%E9%98%85%E8%AF%BB%E6%80%A7%E6%9B%B4%E5%A5%BD"><span class="nav-number">1.1.3.7.</span> <span class="nav-text">[建议] 对于 if...else...、try...catch...finally 等语句，推荐使用在 &amp;#125; 号后添加一个换行 的风格，使代码层次结构更清晰，阅读性更好</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AF%AD%E5%8F%A5"><span class="nav-number">1.1.4.</span> <span class="nav-text">语句</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E5%BE%97%E7%9C%81%E7%95%A5%E8%AF%AD%E5%8F%A5%E7%BB%93%E6%9D%9F%E7%9A%84%E5%88%86%E5%8F%B7"><span class="nav-number">1.1.4.1.</span> <span class="nav-text">[强制] 不得省略语句结束的分号</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%9C%A8-if-else-for-do-while-%E8%AF%AD%E5%8F%A5%E4%B8%AD%EF%BC%8C%E5%8D%B3%E4%BD%BF%E5%8F%AA%E6%9C%89%E4%B8%80%E8%A1%8C%EF%BC%8C%E4%B9%9F%E4%B8%8D%E5%BE%97%E7%9C%81%E7%95%A5%E5%9D%97"><span class="nav-number">1.1.4.2.</span> <span class="nav-text">[强制] 在 if &#x2F; else &#x2F; for &#x2F; do &#x2F; while 语句中，即使只有一行，也不得省略块 &amp;#123;...&amp;#125;</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%87%BD%E6%95%B0%E5%AE%9A%E4%B9%89%E7%BB%93%E6%9D%9F%E4%B8%8D%E5%85%81%E8%AE%B8%E6%B7%BB%E5%8A%A0%E5%88%86%E5%8F%B7"><span class="nav-number">1.1.4.3.</span> <span class="nav-text">[强制] 函数定义结束不允许添加分号</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-IIFE-%E5%BF%85%E9%A1%BB%E5%9C%A8%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%A4%96%E6%B7%BB%E5%8A%A0-%EF%BC%8C%E9%9D%9E-IIFE-%E4%B8%8D%E5%BE%97%E5%9C%A8%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%A4%96%E6%B7%BB%E5%8A%A0"><span class="nav-number">1.1.4.4.</span> <span class="nav-text">[强制] IIFE 必须在函数表达式外添加 (，非 IIFE 不得在函数表达式外添加 (</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%91%BD%E5%90%8D"><span class="nav-number">1.2.</span> <span class="nav-text">命名</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%8F%98%E9%87%8F-%E4%BD%BF%E7%94%A8-Camel%E5%91%BD%E5%90%8D%E6%B3%95"><span class="nav-number">1.2.0.1.</span> <span class="nav-text">[强制] 变量 使用 Camel命名法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%B8%B8%E9%87%8F-%E4%BD%BF%E7%94%A8-%E5%85%A8%E9%83%A8%E5%AD%97%E6%AF%8D%E5%A4%A7%E5%86%99%EF%BC%8C%E5%8D%95%E8%AF%8D%E9%97%B4%E4%B8%8B%E5%88%92%E7%BA%BF%E5%88%86%E9%9A%94-%E7%9A%84%E5%91%BD%E5%90%8D%E6%96%B9%E5%BC%8F"><span class="nav-number">1.2.0.2.</span> <span class="nav-text">[强制] 常量 使用 全部字母大写，单词间下划线分隔 的命名方式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%87%BD%E6%95%B0-%E4%BD%BF%E7%94%A8-Camel%E5%91%BD%E5%90%8D%E6%B3%95"><span class="nav-number">1.2.0.3.</span> <span class="nav-text">[强制] 函数 使用 Camel命名法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%87%BD%E6%95%B0%E7%9A%84-%E5%8F%82%E6%95%B0-%E4%BD%BF%E7%94%A8-Camel%E5%91%BD%E5%90%8D%E6%B3%95"><span class="nav-number">1.2.0.4.</span> <span class="nav-text">[强制] 函数的 参数 使用 Camel命名法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%B1%BB-%E4%BD%BF%E7%94%A8-Pascal%E5%91%BD%E5%90%8D%E6%B3%95"><span class="nav-number">1.2.0.5.</span> <span class="nav-text">[强制] 类 使用 Pascal命名法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%B1%BB%E7%9A%84-%E6%96%B9%E6%B3%95-%E5%B1%9E%E6%80%A7-%E4%BD%BF%E7%94%A8-Camel%E5%91%BD%E5%90%8D%E6%B3%95"><span class="nav-number">1.2.0.6.</span> <span class="nav-text">[强制] 类的 方法 &#x2F; 属性 使用 Camel命名法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E6%9E%9A%E4%B8%BE%E5%8F%98%E9%87%8F-%E4%BD%BF%E7%94%A8-Pascal%E5%91%BD%E5%90%8D%E6%B3%95%EF%BC%8C%E6%9E%9A%E4%B8%BE%E7%9A%84%E5%B1%9E%E6%80%A7-%E4%BD%BF%E7%94%A8-%E5%85%A8%E9%83%A8%E5%AD%97%E6%AF%8D%E5%A4%A7%E5%86%99%EF%BC%8C%E5%8D%95%E8%AF%8D%E9%97%B4%E4%B8%8B%E5%88%92%E7%BA%BF%E5%88%86%E9%9A%94-%E7%9A%84%E5%91%BD%E5%90%8D%E6%96%B9%E5%BC%8F"><span class="nav-number">1.2.0.7.</span> <span class="nav-text">[强制] 枚举变量 使用 Pascal命名法，枚举的属性 使用 全部字母大写，单词间下划线分隔 的命名方式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4-%E4%BD%BF%E7%94%A8-Camel%E5%91%BD%E5%90%8D%E6%B3%95"><span class="nav-number">1.2.0.8.</span> <span class="nav-text">[强制] 命名空间 使用 Camel命名法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%94%B1%E5%A4%9A%E4%B8%AA%E5%8D%95%E8%AF%8D%E7%BB%84%E6%88%90%E7%9A%84%E7%BC%A9%E5%86%99%E8%AF%8D%EF%BC%8C%E5%9C%A8%E5%91%BD%E5%90%8D%E4%B8%AD%EF%BC%8C%E6%A0%B9%E6%8D%AE%E5%BD%93%E5%89%8D%E5%91%BD%E5%90%8D%E6%B3%95%E5%92%8C%E5%87%BA%E7%8E%B0%E7%9A%84%E4%BD%8D%E7%BD%AE%EF%BC%8C%E6%89%80%E6%9C%89%E5%AD%97%E6%AF%8D%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99%E4%B8%8E%E9%A6%96%E5%AD%97%E6%AF%8D%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99%E4%BF%9D%E6%8C%81%E4%B8%80%E8%87%B4"><span class="nav-number">1.2.0.9.</span> <span class="nav-text">[强制] 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%B1%BB%E5%90%8D-%E4%BD%BF%E7%94%A8-%E5%90%8D%E8%AF%8D"><span class="nav-number">1.2.0.10.</span> <span class="nav-text">[强制] 类名 使用 名词</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%87%BD%E6%95%B0%E5%90%8D-%E4%BD%BF%E7%94%A8-%E5%8A%A8%E5%AE%BE%E7%9F%AD%E8%AF%AD"><span class="nav-number">1.2.0.11.</span> <span class="nav-text">[建议] 函数名 使用 动宾短语</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-boolean-%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%8F%98%E9%87%8F%E4%BD%BF%E7%94%A8-is-%E6%88%96-has-%E5%BC%80%E5%A4%B4"><span class="nav-number">1.2.0.12.</span> <span class="nav-text">[建议] boolean 类型的变量使用 is 或 has 开头</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-Promise%E5%AF%B9%E8%B1%A1-%E7%94%A8-%E5%8A%A8%E5%AE%BE%E7%9F%AD%E8%AF%AD%E7%9A%84%E8%BF%9B%E8%A1%8C%E6%97%B6-%E8%A1%A8%E8%BE%BE"><span class="nav-number">1.2.0.13.</span> <span class="nav-text">[建议] Promise对象 用 动宾短语的进行时 表达</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.</span> <span class="nav-text">注释</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.1.</span> <span class="nav-text">单行注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%BF%85%E9%A1%BB%E7%8B%AC%E5%8D%A0%E4%B8%80%E8%A1%8C%E3%80%82-%E5%90%8E%E8%B7%9F%E4%B8%80%E4%B8%AA%E7%A9%BA%E6%A0%BC%EF%BC%8C%E7%BC%A9%E8%BF%9B%E4%B8%8E%E4%B8%8B%E4%B8%80%E8%A1%8C%E8%A2%AB%E6%B3%A8%E9%87%8A%E8%AF%B4%E6%98%8E%E7%9A%84%E4%BB%A3%E7%A0%81%E4%B8%80%E8%87%B4"><span class="nav-number">1.3.1.1.</span> <span class="nav-text">[强制] 必须独占一行。&#x2F;&#x2F; 后跟一个空格，缩进与下一行被注释说明的代码一致</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%9A%E8%A1%8C%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.2.</span> <span class="nav-text">多行注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8-%E8%BF%99%E6%A0%B7%E7%9A%84%E5%A4%9A%E8%A1%8C%E6%B3%A8%E9%87%8A%E3%80%82%E6%9C%89%E5%A4%9A%E8%A1%8C%E6%B3%A8%E9%87%8A%E5%86%85%E5%AE%B9%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8%E5%A4%9A%E4%B8%AA%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.2.1.</span> <span class="nav-text">[建议] 避免使用 &#x2F;*...*&#x2F; 这样的多行注释。有多行注释内容时，使用多个单行注释</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%96%87%E6%A1%A3%E5%8C%96%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.3.</span> <span class="nav-text">文档化注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%BA%E4%BA%86%E4%BE%BF%E4%BA%8E%E4%BB%A3%E7%A0%81%E9%98%85%E8%AF%BB%E5%92%8C%E8%87%AA%E6%96%87%E6%A1%A3%E5%8C%96%EF%BC%8C%E4%BB%A5%E4%B8%8B%E5%86%85%E5%AE%B9%E5%BF%85%E9%A1%BB%E5%8C%85%E5%90%AB%E4%BB%A5-%E5%BD%A2%E5%BC%8F%E7%9A%84%E5%9D%97%E6%B3%A8%E9%87%8A%E4%B8%AD"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">[强制] 为了便于代码阅读和自文档化，以下内容必须包含以 &#x2F;**...*&#x2F; 形式的块注释中</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E6%96%87%E6%A1%A3%E6%B3%A8%E9%87%8A%E5%89%8D%E5%BF%85%E9%A1%BB%E7%A9%BA%E4%B8%80%E8%A1%8C"><span class="nav-number">1.3.3.2.</span> <span class="nav-text">[强制] 文档注释前必须空一行</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E8%87%AA%E6%96%87%E6%A1%A3%E5%8C%96%E7%9A%84%E6%96%87%E6%A1%A3%E8%AF%B4%E6%98%8E-what%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF-how"><span class="nav-number">1.3.3.3.</span> <span class="nav-text">[建议] 自文档化的文档说明 what，而不是 how</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B1%BB%E5%9E%8B%E5%AE%9A%E4%B9%89"><span class="nav-number">1.3.4.</span> <span class="nav-text">类型定义</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%B1%BB%E5%9E%8B%E5%AE%9A%E4%B9%89%E9%83%BD%E6%98%AF%E4%BB%A5-%E5%BC%80%E5%A7%8B-%E4%BB%A5-%E7%BB%93%E6%9D%9F"><span class="nav-number">1.3.4.1.</span> <span class="nav-text">[强制] 类型定义都是以 &amp;#123; 开始, 以 &amp;#125; 结束</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%AF%B9%E4%BA%8E%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B-string-number-boolean-%EF%BC%8C%E9%A6%96%E5%AD%97%E6%AF%8D%E5%BF%85%E9%A1%BB%E5%B0%8F%E5%86%99"><span class="nav-number">1.3.4.2.</span> <span class="nav-text">[强制] 对于基本类型 {string}, {number}, {boolean}，首字母必须小写</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%96%87%E4%BB%B6%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.5.</span> <span class="nav-text">文件注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E6%96%87%E4%BB%B6%E9%A1%B6%E9%83%A8%E5%BF%85%E9%A1%BB%E5%8C%85%E5%90%AB%E6%96%87%E4%BB%B6%E6%B3%A8%E9%87%8A%EF%BC%8C%E7%94%A8-file-%E6%A0%87%E8%AF%86%E6%96%87%E4%BB%B6%E8%AF%B4%E6%98%8E"><span class="nav-number">1.3.5.1.</span> <span class="nav-text">[强制] 文件顶部必须包含文件注释，用 @file 标识文件说明</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E6%96%87%E4%BB%B6%E6%B3%A8%E9%87%8A%E4%B8%AD%E5%8F%AF%E4%BB%A5%E7%94%A8-author-%E6%A0%87%E8%AF%86%E5%BC%80%E5%8F%91%E8%80%85%E4%BF%A1%E6%81%AF"><span class="nav-number">1.3.5.2.</span> <span class="nav-text">[建议] 文件注释中可以用 @author 标识开发者信息</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.6.</span> <span class="nav-text">命名空间注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%E4%BD%BF%E7%94%A8-namespace-%E6%A0%87%E8%AF%86"><span class="nav-number">1.3.6.1.</span> <span class="nav-text">[建议] 命名空间使用 @namespace 标识</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B1%BB%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.7.</span> <span class="nav-text">类注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-class-%E6%A0%87%E8%AE%B0%E7%B1%BB%E6%88%96%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">1.3.7.1.</span> <span class="nav-text">[建议] 使用 @class 标记类或构造函数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-extends-%E6%A0%87%E8%AE%B0%E7%B1%BB%E7%9A%84%E7%BB%A7%E6%89%BF%E4%BF%A1%E6%81%AF"><span class="nav-number">1.3.7.2.</span> <span class="nav-text">[建议] 使用 @extends 标记类的继承信息</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8%E5%8C%85%E8%A3%85%E6%96%B9%E5%BC%8F%E6%89%A9%E5%B1%95%E7%B1%BB%E6%88%90%E5%91%98%E6%97%B6%EF%BC%8C-%E5%BF%85%E9%A1%BB%E9%80%9A%E8%BF%87-lends-%E8%BF%9B%E8%A1%8C%E9%87%8D%E6%96%B0%E6%8C%87%E5%90%91"><span class="nav-number">1.3.7.3.</span> <span class="nav-text">[强制] 使用包装方式扩展类成员时， 必须通过 @lends 进行重新指向</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%B1%BB%E7%9A%84%E5%B1%9E%E6%80%A7%E6%88%96%E6%96%B9%E6%B3%95%E7%AD%89%E6%88%90%E5%91%98%E4%BF%A1%E6%81%AF%E4%B8%8D%E6%98%AF-public-%E7%9A%84%EF%BC%8C%E5%BA%94%E4%BD%BF%E7%94%A8-protected-%E6%88%96-private-%E6%A0%87%E8%AF%86%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7"><span class="nav-number">1.3.7.4.</span> <span class="nav-text">[强制] 类的属性或方法等成员信息不是 public 的，应使用 @protected 或 @private 标识可访问性</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%87%BD%E6%95%B0-%E6%96%B9%E6%B3%95%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.8.</span> <span class="nav-text">函数&#x2F;方法注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%87%BD%E6%95%B0-%E6%96%B9%E6%B3%95%E6%B3%A8%E9%87%8A%E5%BF%85%E9%A1%BB%E5%8C%85%E5%90%AB%E5%87%BD%E6%95%B0%E8%AF%B4%E6%98%8E%EF%BC%8C%E6%9C%89%E5%8F%82%E6%95%B0%E5%92%8C%E8%BF%94%E5%9B%9E%E5%80%BC%E6%97%B6%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8%E6%B3%A8%E9%87%8A%E6%A0%87%E8%AF%86"><span class="nav-number">1.3.8.1.</span> <span class="nav-text">[强制] 函数&#x2F;方法注释必须包含函数说明，有参数和返回值时必须使用注释标识</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%8F%82%E6%95%B0%E5%92%8C%E8%BF%94%E5%9B%9E%E5%80%BC%E6%B3%A8%E9%87%8A%E5%BF%85%E9%A1%BB%E5%8C%85%E5%90%AB%E7%B1%BB%E5%9E%8B%E4%BF%A1%E6%81%AF%EF%BC%8C%E4%B8%94%E4%B8%8D%E5%85%81%E8%AE%B8%E7%9C%81%E7%95%A5%E5%8F%82%E6%95%B0%E7%9A%84%E8%AF%B4%E6%98%8E"><span class="nav-number">1.3.8.2.</span> <span class="nav-text">[强制] 参数和返回值注释必须包含类型信息，且不允许省略参数的说明</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%BD%93%E5%87%BD%E6%95%B0%E6%98%AF%E5%86%85%E9%83%A8%E5%87%BD%E6%95%B0%EF%BC%8C%E5%A4%96%E9%83%A8%E4%B8%8D%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%97%B6%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8-inner-%E6%A0%87%E8%AF%86"><span class="nav-number">1.3.8.3.</span> <span class="nav-text">[建议] 当函数是内部函数，外部不可访问时，可以使用 @inner 标识</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%AF%B9-Object-%E4%B8%AD%E5%90%84%E9%A1%B9%E7%9A%84%E6%8F%8F%E8%BF%B0%EF%BC%8C-%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8-param-%E6%A0%87%E8%AF%86"><span class="nav-number">1.3.8.4.</span> <span class="nav-text">[强制] 对 Object 中各项的描述， 必须使用 @param 标识</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E9%87%8D%E5%86%99%E7%88%B6%E7%B1%BB%E6%96%B9%E6%B3%95%E6%97%B6%EF%BC%8C-%E5%BA%94%E5%BD%93%E6%B7%BB%E5%8A%A0-override-%E6%A0%87%E8%AF%86%E3%80%82%E5%A6%82%E6%9E%9C%E9%87%8D%E5%86%99%E7%9A%84%E5%BD%A2%E5%8F%82%E4%B8%AA%E6%95%B0%E3%80%81%E7%B1%BB%E5%9E%8B%E3%80%81%E9%A1%BA%E5%BA%8F%E5%92%8C%E8%BF%94%E5%9B%9E%E5%80%BC%E7%B1%BB%E5%9E%8B%E5%9D%87%E6%9C%AA%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%EF%BC%8C%E5%8F%AF%E7%9C%81%E7%95%A5-param%E3%80%81-return%EF%BC%8C%E4%BB%85%E7%94%A8-override-%E6%A0%87%E8%AF%86%EF%BC%8C%E5%90%A6%E5%88%99%E4%BB%8D%E5%BA%94%E4%BD%9C%E5%AE%8C%E6%95%B4%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.8.5.</span> <span class="nav-text">[建议] 重写父类方法时， 应当添加 @override 标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略 @param、@return，仅用 @override 标识，否则仍应作完整注释</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.9.</span> <span class="nav-text">事件注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8-event-%E6%A0%87%E8%AF%86%E4%BA%8B%E4%BB%B6%EF%BC%8C%E4%BA%8B%E4%BB%B6%E5%8F%82%E6%95%B0%E7%9A%84%E6%A0%87%E8%AF%86%E4%B8%8E%E6%96%B9%E6%B3%95%E6%8F%8F%E8%BF%B0%E7%9A%84%E5%8F%82%E6%95%B0%E6%A0%87%E8%AF%86%E7%9B%B8%E5%90%8C"><span class="nav-number">1.3.9.1.</span> <span class="nav-text">[强制] 必须使用 @event 标识事件，事件参数的标识与方法描述的参数标识相同</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%9C%A8%E4%BC%9A%E5%B9%BF%E6%92%AD%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%87%BD%E6%95%B0%E5%89%8D%E4%BD%BF%E7%94%A8-fires-%E6%A0%87%E8%AF%86%E5%B9%BF%E6%92%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%9C%A8%E5%B9%BF%E6%92%AD%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%A0%81%E5%89%8D%E4%BD%BF%E7%94%A8-event-%E6%A0%87%E8%AF%86%E4%BA%8B%E4%BB%B6"><span class="nav-number">1.3.9.2.</span> <span class="nav-text">[强制] 在会广播事件的函数前使用 @fires 标识广播的事件，在广播事件代码前使用 @event 标识事件</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E4%BA%8E%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%B3%A8%E9%87%8A%EF%BC%8C%E4%BD%BF%E7%94%A8-param-%E6%A0%87%E8%AF%86%EF%BC%8C%E7%94%9F%E6%88%90%E6%96%87%E6%A1%A3%E6%97%B6%E5%8F%AF%E8%AF%BB%E6%80%A7%E6%9B%B4%E5%A5%BD"><span class="nav-number">1.3.9.3.</span> <span class="nav-text">[建议] 对于事件对象的注释，使用 @param 标识，生成文档时可读性更好</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%B8%B8%E9%87%8F%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.10.</span> <span class="nav-text">常量注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%B8%B8%E9%87%8F%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8-const-%E6%A0%87%E8%AE%B0%EF%BC%8C%E5%B9%B6%E5%8C%85%E5%90%AB%E8%AF%B4%E6%98%8E%E5%92%8C%E7%B1%BB%E5%9E%8B%E4%BF%A1%E6%81%AF"><span class="nav-number">1.3.10.1.</span> <span class="nav-text">[强制] 常量必须使用 @const 标记，并包含说明和类型信息</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%8D%E6%9D%82%E7%B1%BB%E5%9E%8B%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.11.</span> <span class="nav-text">复杂类型注释</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E4%BA%8E%E7%B1%BB%E5%9E%8B%E6%9C%AA%E5%AE%9A%E4%B9%89%E7%9A%84%E5%A4%8D%E6%9D%82%E7%BB%93%E6%9E%84%E7%9A%84%E6%B3%A8%E9%87%8A%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8-typedef-%E6%A0%87%E8%AF%86%E6%9D%A5%E5%AE%9A%E4%B9%89"><span class="nav-number">1.3.11.1.</span> <span class="nav-text">[建议] 对于类型未定义的复杂结构的注释，可以使用 @typedef 标识来定义</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link"><span class="nav-number">1.3.12.</span> <span class="nav-text"></span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%BB%86%E8%8A%82%E6%B3%A8%E9%87%8A"><span class="nav-number">1.3.13.</span> <span class="nav-text">细节注释</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%BB%86%E8%8A%82%E6%B3%A8%E9%87%8A%E9%81%B5%E5%BE%AA%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A%E7%9A%84%E6%A0%BC%E5%BC%8F%E3%80%82%E8%AF%B4%E6%98%8E%E5%BF%85%E9%A1%BB%E6%8D%A2%E8%A1%8C%E6%97%B6%EF%BC%8C%E6%AF%8F%E8%A1%8C%E6%98%AF%E4%B8%80%E4%B8%AA%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A%E7%9A%84%E8%B5%B7%E5%A7%8B"><span class="nav-number">1.3.14.</span> <span class="nav-text">[建议] 细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E6%9C%89%E6%97%B6%E6%88%91%E4%BB%AC%E4%BC%9A%E4%BD%BF%E7%94%A8%E4%B8%80%E4%BA%9B%E7%89%B9%E6%AE%8A%E6%A0%87%E8%AE%B0%E8%BF%9B%E8%A1%8C%E8%AF%B4%E6%98%8E%E3%80%82%E7%89%B9%E6%AE%8A%E6%A0%87%E8%AE%B0%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A%E7%9A%84%E5%BD%A2%E5%BC%8F%E3%80%82%E4%B8%8B%E9%9D%A2%E5%88%97%E4%B8%BE%E4%BA%86%E4%B8%80%E4%BA%9B%E5%B8%B8%E7%94%A8%E6%A0%87%E8%AE%B0"><span class="nav-number">1.3.14.1.</span> <span class="nav-text">[强制] 有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AF%AD%E8%A8%80%E7%89%B9%E6%80%A7"><span class="nav-number">2.</span> <span class="nav-text">语言特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F"><span class="nav-number">2.1.</span> <span class="nav-text">变量</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%8F%98%E9%87%8F%E3%80%81%E5%87%BD%E6%95%B0%E5%9C%A8%E4%BD%BF%E7%94%A8%E5%89%8D%E5%BF%85%E9%A1%BB%E5%85%88%E5%AE%9A%E4%B9%89"><span class="nav-number">2.1.1.</span> <span class="nav-text">[强制] 变量、函数在使用前必须先定义</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-let-%E5%92%8C-const-%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F%EF%BC%8C%E4%B8%8D%E4%BD%BF%E7%94%A8-var"><span class="nav-number">2.1.2.</span> <span class="nav-text">[强制] 使用 let 和 const 定义变量，不使用 var</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%8F%98%E9%87%8F%E5%BF%85%E9%A1%BB-%E5%8D%B3%E7%94%A8%E5%8D%B3%E5%A3%B0%E6%98%8E%EF%BC%8C%E4%B8%8D%E5%BE%97%E5%9C%A8%E5%87%BD%E6%95%B0%E6%88%96%E5%85%B6%E5%AE%83%E5%BD%A2%E5%BC%8F%E7%9A%84%E4%BB%A3%E7%A0%81%E5%9D%97%E8%B5%B7%E5%A7%8B%E4%BD%8D%E7%BD%AE%E7%BB%9F%E4%B8%80%E5%A3%B0%E6%98%8E%E6%89%80%E6%9C%89%E5%8F%98%E9%87%8F"><span class="nav-number">2.1.3.</span> <span class="nav-text">[强制] 变量必须 即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E6%9E%84"><span class="nav-number">2.2.</span> <span class="nav-text">解构</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A83%E5%B1%82%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%9A%84%E8%A7%A3%E6%9E%84"><span class="nav-number">2.2.1.</span> <span class="nav-text">[强制] 不要使用3层及以上的解构</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8%E8%A7%A3%E6%9E%84%E5%87%8F%E5%B0%91%E4%B8%AD%E9%97%B4%E5%8F%98%E9%87%8F"><span class="nav-number">2.2.2.</span> <span class="nav-text">[建议] 使用解构减少中间变量</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BB%85%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%E6%97%B6%E4%B8%8D%E5%85%81%E8%AE%B8%E4%BD%BF%E7%94%A8%E8%A7%A3%E6%9E%84"><span class="nav-number">2.2.3.</span> <span class="nav-text">[强制] 仅定义一个变量时不允许使用解构</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%A6%82%E6%9E%9C%E4%B8%8D%E8%8A%82%E7%9C%81%E7%BC%96%E5%86%99%E6%97%B6%E4%BA%A7%E7%94%9F%E7%9A%84%E4%B8%AD%E9%97%B4%E5%8F%98%E9%87%8F%EF%BC%8C%E8%A7%A3%E6%9E%84%E8%A1%A8%E8%BE%BE%E5%BC%8F-%E5%8F%B7%E5%8F%B3%E8%BE%B9%E4%B8%8D%E5%85%81%E8%AE%B8%E6%98%AF-ObjectLiteral-%E5%92%8C-ArrayLiteral"><span class="nav-number">2.2.4.</span> <span class="nav-text">[强制] 如果不节省编写时产生的中间变量，解构表达式 &#x3D; 号右边不允许是 ObjectLiteral 和 ArrayLiteral</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8%E5%89%A9%E4%BD%99%E8%BF%90%E7%AE%97%E7%AC%A6%E6%97%B6%EF%BC%8C%E5%89%A9%E4%BD%99%E8%BF%90%E7%AE%97%E7%AC%A6%E4%B9%8B%E5%89%8D%E7%9A%84%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E5%BF%85%E9%9C%80%E5%85%B7%E5%90%8D"><span class="nav-number">2.2.5.</span> <span class="nav-text">[强制] 使用剩余运算符时，剩余运算符之前的所有元素必需具名</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9D%A1%E4%BB%B6"><span class="nav-number">2.3.</span> <span class="nav-text">条件</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%9C%A8-Equality-Expression-%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%B1%BB%E5%9E%8B%E4%B8%A5%E6%A0%BC%E7%9A%84-%E3%80%82%E4%BB%85%E5%BD%93%E5%88%A4%E6%96%AD-null-%E6%88%96-undefined-%E6%97%B6%EF%BC%8C%E5%85%81%E8%AE%B8%E4%BD%BF%E7%94%A8-null"><span class="nav-number">2.3.0.1.</span> <span class="nav-text">[强制] 在 Equality Expression 中使用类型严格的 &#x3D;&#x3D;&#x3D;。仅当判断 null 或 undefined 时，允许使用 &#x3D;&#x3D; null</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E5%8F%AF%E8%83%BD%E4%BD%BF%E7%94%A8%E7%AE%80%E6%B4%81%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-number">2.3.0.2.</span> <span class="nav-text">[建议] 尽可能使用简洁的表达式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E6%8C%89%E6%89%A7%E8%A1%8C%E9%A2%91%E7%8E%87%E6%8E%92%E5%88%97%E5%88%86%E6%94%AF%E7%9A%84%E9%A1%BA%E5%BA%8F"><span class="nav-number">2.3.0.3.</span> <span class="nav-text">[建议] 按执行频率排列分支的顺序</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E4%BA%8E%E7%9B%B8%E5%90%8C%E5%8F%98%E9%87%8F%E6%88%96%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E5%A4%9A%E5%80%BC%E6%9D%A1%E4%BB%B6%EF%BC%8C%E7%94%A8-switch-%E4%BB%A3%E6%9B%BF-if"><span class="nav-number">2.3.0.4.</span> <span class="nav-text">[建议] 对于相同变量或表达式的多值条件，用 switch 代替 if</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%A6%82%E6%9E%9C%E5%87%BD%E6%95%B0%E6%88%96%E5%85%A8%E5%B1%80%E4%B8%AD%E7%9A%84-else-%E5%9D%97%E5%90%8E%E6%B2%A1%E6%9C%89%E4%BB%BB%E4%BD%95%E8%AF%AD%E5%8F%A5%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%88%A0%E9%99%A4-else"><span class="nav-number">2.3.0.5.</span> <span class="nav-text">[建议] 如果函数或全局中的 else 块后没有任何语句，可以删除 else</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BE%AA%E7%8E%AF"><span class="nav-number">2.4.</span> <span class="nav-text">循环</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%B8%8D%E8%A6%81%E5%9C%A8%E5%BE%AA%E7%8E%AF%E4%BD%93%E4%B8%AD%E5%8C%85%E5%90%AB%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%8C%E4%BA%8B%E5%85%88%E5%B0%86%E5%87%BD%E6%95%B0%E6%8F%90%E5%8F%96%E5%88%B0%E5%BE%AA%E7%8E%AF%E4%BD%93%E5%A4%96"><span class="nav-number">2.4.0.1.</span> <span class="nav-text">[建议] 不要在循环体中包含函数表达式，事先将函数提取到循环体外</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E5%BE%AA%E7%8E%AF%E5%86%85%E5%A4%9A%E6%AC%A1%E4%BD%BF%E7%94%A8%E7%9A%84%E4%B8%8D%E5%8F%98%E5%80%BC%EF%BC%8C%E5%9C%A8%E5%BE%AA%E7%8E%AF%E5%A4%96%E7%94%A8%E5%8F%98%E9%87%8F%E7%BC%93%E5%AD%98"><span class="nav-number">2.4.0.2.</span> <span class="nav-text">[建议] 对循环内多次使用的不变值，在循环外用变量缓存</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E6%9C%89%E5%BA%8F%E9%9B%86%E5%90%88%E8%BF%9B%E8%A1%8C%E9%81%8D%E5%8E%86%E6%97%B6%EF%BC%8C%E7%BC%93%E5%AD%98-length"><span class="nav-number">2.4.0.3.</span> <span class="nav-text">[建议] 对有序集合进行遍历时，缓存 length</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E6%9C%89%E5%BA%8F%E9%9B%86%E5%90%88%E8%BF%9B%E8%A1%8C%E9%A1%BA%E5%BA%8F%E6%97%A0%E5%85%B3%E7%9A%84%E9%81%8D%E5%8E%86%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8%E9%80%86%E5%BA%8F%E9%81%8D%E5%8E%86"><span class="nav-number">2.4.0.4.</span> <span class="nav-text">[建议] 对有序集合进行顺序无关的遍历时，使用逆序遍历</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.5.</span> <span class="nav-text">类型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B"><span class="nav-number">2.5.1.</span> <span class="nav-text">类型检测</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B%E4%BC%98%E5%85%88%E4%BD%BF%E7%94%A8-typeof%E3%80%82%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B%E4%BD%BF%E7%94%A8-instanceof%E3%80%82null-%E6%88%96-undefined-%E7%9A%84%E6%A3%80%E6%B5%8B%E4%BD%BF%E7%94%A8-null"><span class="nav-number">2.5.1.1.</span> <span class="nav-text">[建议] 类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 &#x3D;&#x3D; null</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.5.2.</span> <span class="nav-text">类型转换</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E8%BD%AC%E6%8D%A2%E6%88%90-string-%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-39-39"><span class="nav-number">2.5.2.1.</span> <span class="nav-text">[建议] 转换成 string 时，使用 + &#39;&#39;</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E8%BD%AC%E6%8D%A2%E6%88%90-number-%E6%97%B6%EF%BC%8C%E9%80%9A%E5%B8%B8%E4%BD%BF%E7%94%A8"><span class="nav-number">2.5.2.2.</span> <span class="nav-text">[建议] 转换成 number 时，通常使用 +</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-string-%E8%BD%AC%E6%8D%A2%E6%88%90-number%EF%BC%8C%E8%A6%81%E8%BD%AC%E6%8D%A2%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%BB%93%E5%B0%BE%E5%8C%85%E5%90%AB%E9%9D%9E%E6%95%B0%E5%AD%97%E5%B9%B6%E6%9C%9F%E6%9C%9B%E5%BF%BD%E7%95%A5%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-parseInt"><span class="nav-number">2.5.2.3.</span> <span class="nav-text">[建议] string 转换成 number，要转换的字符串结尾包含非数字并期望忽略时，使用 parseInt</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-parseInt-%E6%97%B6%EF%BC%8C%E5%BF%85%E9%A1%BB%E6%8C%87%E5%AE%9A%E8%BF%9B%E5%88%B6"><span class="nav-number">2.5.2.4.</span> <span class="nav-text">[强制] 使用 parseInt 时，必须指定进制</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E8%BD%AC%E6%8D%A2%E6%88%90-boolean-%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8"><span class="nav-number">2.5.2.5.</span> <span class="nav-text">[建议] 转换成 boolean 时，使用 !!</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-number-%E5%8E%BB%E9%99%A4%E5%B0%8F%E6%95%B0%E7%82%B9%EF%BC%8C%E4%BD%BF%E7%94%A8-Math-floor-Math-round-Math-ceil%EF%BC%8C%E4%B8%8D%E4%BD%BF%E7%94%A8-parseInt"><span class="nav-number">2.5.2.6.</span> <span class="nav-text">[建议] number 去除小数点，使用 Math.floor &#x2F; Math.round &#x2F; Math.ceil，不使用 parseInt</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="nav-number">2.6.</span> <span class="nav-text">3.3 模板字符串</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%86%85%E5%8F%98%E9%87%8F%E6%9B%BF%E6%8D%A2%E6%97%B6%EF%BC%8C%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8-2-%E6%AC%A1%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%9A%84%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8"><span class="nav-number">2.6.1.</span> <span class="nav-text">[强制] 字符串内变量替换时，不要使用 2 次及以上的函数调用</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.7.</span> <span class="nav-text">对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8%E5%AF%B9%E8%B1%A1%E5%AD%97%E9%9D%A2%E9%87%8F-%E5%88%9B%E5%BB%BA%E6%96%B0-Object"><span class="nav-number">2.7.1.</span> <span class="nav-text">[强制] 使用对象字面量 &amp;#123;&amp;#125; 创建新 Object</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E8%B1%A1%E5%88%9B%E5%BB%BA%E6%97%B6%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%80%E6%9C%89-%E5%B1%9E%E6%80%A7-%E5%9D%87%E5%8F%AF%E4%BB%A5%E4%B8%8D%E6%B7%BB%E5%8A%A0%E5%BC%95%E5%8F%B7%EF%BC%8C%E5%BB%BA%E8%AE%AE%E6%89%80%E6%9C%89-%E5%B1%9E%E6%80%A7-%E4%B8%8D%E6%B7%BB%E5%8A%A0%E5%BC%95%E5%8F%B7"><span class="nav-number">2.7.2.</span> <span class="nav-text">[建议] 对象创建时，如果一个对象的所有 属性 均可以不添加引号，建议所有 属性 不添加引号</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E8%B1%A1%E5%88%9B%E5%BB%BA%E6%97%B6%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%BB%BB%E4%BD%95%E4%B8%80%E4%B8%AA-%E5%B1%9E%E6%80%A7-%E9%9C%80%E8%A6%81%E6%B7%BB%E5%8A%A0%E5%BC%95%E5%8F%B7%EF%BC%8C%E5%88%99%E6%89%80%E6%9C%89-%E5%B1%9E%E6%80%A7-%E5%BB%BA%E8%AE%AE%E6%B7%BB%E5%8A%A0-39"><span class="nav-number">2.7.3.</span> <span class="nav-text">[建议] 对象创建时，如果任何一个 属性 需要添加引号，则所有 属性 建议添加 &#39;</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E5%85%81%E8%AE%B8%E4%BF%AE%E6%94%B9%E5%92%8C%E6%89%A9%E5%B1%95%E4%BB%BB%E4%BD%95%E5%8E%9F%E7%94%9F%E5%AF%B9%E8%B1%A1%E5%92%8C%E5%AE%BF%E4%B8%BB%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%8E%9F%E5%9E%8B"><span class="nav-number">2.7.4.</span> <span class="nav-text">[强制] 不允许修改和扩展任何原生对象和宿主对象的原型</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B1%9E%E6%80%A7%E8%AE%BF%E9%97%AE%E6%97%B6%EF%BC%8C%E5%B0%BD%E9%87%8F%E4%BD%BF%E7%94%A8"><span class="nav-number">2.7.5.</span> <span class="nav-text">[建议] 属性访问时，尽量使用 .</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-for-in-%E9%81%8D%E5%8E%86%E5%AF%B9%E8%B1%A1%E6%97%B6-%E4%BD%BF%E7%94%A8-hasOwnProperty-%E8%BF%87%E6%BB%A4%E6%8E%89%E5%8E%9F%E5%9E%8B%E4%B8%AD%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-number">2.7.6.</span> <span class="nav-text">[建议] for in 遍历对象时, 使用 hasOwnProperty 过滤掉原型中的属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%E6%97%B6%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%89%80%E6%9C%89%E9%94%AE%E5%9D%87%E6%8C%87%E5%90%91%E5%90%8C%E5%90%8D%E5%8F%98%E9%87%8F%EF%BC%8C%E5%88%99%E6%89%80%E6%9C%89%E9%94%AE%E9%83%BD%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%EF%BC%9B%E5%A6%82%E6%9E%9C%E6%9C%89%E4%B8%80%E4%B8%AA%E9%94%AE%E6%97%A0%E6%B3%95%E6%8C%87%E5%90%91%E5%90%8C%E5%90%8D%E5%8F%98%E9%87%8F%EF%BC%8C%E5%88%99%E6%89%80%E6%9C%89%E9%94%AE%E9%83%BD%E4%B8%8D%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99"><span class="nav-number">2.7.7.</span> <span class="nav-text">[建议] 定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95%E6%97%B6%E4%BD%BF%E7%94%A8-MethodDefinition-%E8%AF%AD%E6%B3%95%EF%BC%8C%E4%B8%8D%E4%BD%BF%E7%94%A8-PropertyName-FunctionExpression-%E8%AF%AD%E6%B3%95"><span class="nav-number">2.7.8.</span> <span class="nav-text">[强制] 定义方法时使用 MethodDefinition 语法，不使用 PropertyName: FunctionExpression 语法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-Object-keys-%E6%88%96-Object-entries-%E8%BF%9B%E8%A1%8C%E5%AF%B9%E8%B1%A1%E9%81%8D%E5%8E%86"><span class="nav-number">2.7.9.</span> <span class="nav-text">[建议] 使用 Object.keys 或 Object.entries 进行对象遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95%E4%B8%8D%E5%BA%94%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="nav-number">2.7.10.</span> <span class="nav-text">[建议] 定义对象的方法不应使用箭头函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E9%87%8F%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E9%94%AE%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AD%97%E9%9D%A2%E9%87%8F%E4%B8%AD%E5%AE%8C%E6%95%B4%E5%9C%B0%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%8C%E9%81%BF%E5%85%8D%E5%AF%B9%E8%B1%A1%E5%AE%9A%E4%B9%89%E5%90%8E%E7%9B%B4%E6%8E%A5%E5%A2%9E%E5%8A%A0%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="nav-number">2.7.11.</span> <span class="nav-text">[建议] 尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%95%B0%E7%BB%84"><span class="nav-number">2.8.</span> <span class="nav-text">数组</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E5%AD%97%E9%9D%A2%E9%87%8F-%E5%88%9B%E5%BB%BA%E6%96%B0%E6%95%B0%E7%BB%84%EF%BC%8C%E9%99%A4%E9%9D%9E%E6%83%B3%E8%A6%81%E5%88%9B%E5%BB%BA%E7%9A%84%E6%98%AF%E6%8C%87%E5%AE%9A%E9%95%BF%E5%BA%A6%E7%9A%84%E6%95%B0%E7%BB%84"><span class="nav-number">2.8.0.1.</span> <span class="nav-text">[强制] 使用数组字面量 [] 创建新数组，除非想要创建的是指定长度的数组</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84%E4%B8%8D%E4%BD%BF%E7%94%A8-for-in"><span class="nav-number">2.8.0.2.</span> <span class="nav-text">[强制] 遍历数组不使用 for in</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%B8%8D%E5%9B%A0%E4%B8%BA%E6%80%A7%E8%83%BD%E7%9A%84%E5%8E%9F%E5%9B%A0%E8%87%AA%E5%B7%B1%E5%AE%9E%E7%8E%B0%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F%E5%8A%9F%E8%83%BD%EF%BC%8C%E5%B0%BD%E9%87%8F%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E7%9A%84-sort-%E6%96%B9%E6%B3%95"><span class="nav-number">2.8.0.3.</span> <span class="nav-text">[建议] 不因为性能的原因自己实现数组排序功能，尽量使用数组的 sort 方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84%E4%BD%BF%E7%94%A8-length-0"><span class="nav-number">2.8.0.4.</span> <span class="nav-text">[建议] 清空数组使用 .length &#x3D; 0</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0"><span class="nav-number">2.9.</span> <span class="nav-text">函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E9%95%BF%E5%BA%A6"><span class="nav-number">2.9.1.</span> <span class="nav-text">函数长度</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E7%9A%84%E9%95%BF%E5%BA%A6%E6%8E%A7%E5%88%B6%E5%9C%A8-50-%E8%A1%8C%E4%BB%A5%E5%86%85"><span class="nav-number">2.9.1.1.</span> <span class="nav-text">[建议] 一个函数的长度控制在 50 行以内</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8F%82%E6%95%B0%E8%AE%BE%E8%AE%A1"><span class="nav-number">2.9.2.</span> <span class="nav-text">参数设计</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%E6%8E%A7%E5%88%B6%E5%9C%A8-6-%E4%B8%AA%E4%BB%A5%E5%86%85"><span class="nav-number">2.9.2.1.</span> <span class="nav-text">[建议] 一个函数的参数控制在 6 个以内</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E9%80%9A%E8%BF%87-options-%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92%E9%9D%9E%E6%95%B0%E6%8D%AE%E8%BE%93%E5%85%A5%E5%9E%8B%E5%8F%82%E6%95%B0"><span class="nav-number">2.9.2.2.</span> <span class="nav-text">[建议] 通过 options 参数传递非数据输入型参数</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%97%AD%E5%8C%85"><span class="nav-number">2.9.3.</span> <span class="nav-text">闭包</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%9C%A8%E9%80%82%E5%BD%93%E7%9A%84%E6%97%B6%E5%80%99%E5%B0%86%E9%97%AD%E5%8C%85%E5%86%85%E5%A4%A7%E5%AF%B9%E8%B1%A1%E7%BD%AE%E4%B8%BA-null"><span class="nav-number">2.9.3.1.</span> <span class="nav-text">[建议] 在适当的时候将闭包内大对象置为 null</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-IIFE-%E9%81%BF%E5%85%8D-Lift-%E6%95%88%E5%BA%94"><span class="nav-number">2.9.3.2.</span> <span class="nav-text">[建议] 使用 IIFE 避免 Lift 效应</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%A9%BA%E5%87%BD%E6%95%B0"><span class="nav-number">2.9.4.</span> <span class="nav-text">空函数</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%A9%BA%E5%87%BD%E6%95%B0%E4%B8%8D%E4%BD%BF%E7%94%A8-new-Function-%E7%9A%84%E5%BD%A2%E5%BC%8F"><span class="nav-number">2.9.4.1.</span> <span class="nav-text">[建议] 空函数不使用 new Function() 的形式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E4%BA%8E%E6%80%A7%E8%83%BD%E6%9C%89%E9%AB%98%E8%A6%81%E6%B1%82%E7%9A%84%E5%9C%BA%E5%90%88%EF%BC%8C%E5%BB%BA%E8%AE%AE%E5%AD%98%E5%9C%A8%E4%B8%80%E4%B8%AA%E7%A9%BA%E5%87%BD%E6%95%B0%E7%9A%84%E5%B8%B8%E9%87%8F%EF%BC%8C%E4%BE%9B%E5%A4%9A%E5%A4%84%E4%BD%BF%E7%94%A8%E5%85%B1%E4%BA%AB"><span class="nav-number">2.9.4.2.</span> <span class="nav-text">[建议] 对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8%E5%8F%98%E9%87%8F%E9%BB%98%E8%AE%A4%E8%AF%AD%E6%B3%95%E4%BB%A3%E6%9B%BF%E5%9F%BA%E4%BA%8E%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC%E5%A3%B0%E6%98%8E"><span class="nav-number">2.9.5.</span> <span class="nav-text">[建议] 使用变量默认语法代替基于条件判断的默认值声明</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8-arguments-%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%BA%94%E4%BD%BF%E7%94%A8-args-%E4%BB%A3%E6%9B%BF"><span class="nav-number">2.9.6.</span> <span class="nav-text">[强制] 不要使用 arguments 对象，应使用 ...args 代替</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%B1%BB"><span class="nav-number">2.10.</span> <span class="nav-text">类</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-class-%E5%85%B3%E9%94%AE%E5%AD%97%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E7%B1%BB"><span class="nav-number">2.10.1.</span> <span class="nav-text">[强制] 使用 class 关键字定义一个类</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-super-%E8%AE%BF%E9%97%AE%E7%88%B6%E7%B1%BB%E6%88%90%E5%91%98%EF%BC%8C%E8%80%8C%E9%9D%9E%E7%88%B6%E7%B1%BB%E7%9A%84-prototype"><span class="nav-number">2.10.2.</span> <span class="nav-text">[强制] 使用 super 访问父类成员，而非父类的 prototype</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-8-%E6%A8%A1%E5%9D%97"><span class="nav-number">2.11.</span> <span class="nav-text">3.8 模块</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-export-%E4%B8%8E%E5%86%85%E5%AE%B9%E5%AE%9A%E4%B9%89%E6%94%BE%E5%9C%A8%E4%B8%80%E8%B5%B7"><span class="nav-number">2.11.1.</span> <span class="nav-text">[强制] export 与内容定义放在一起</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%9B%B8%E4%BA%92%E4%B9%8B%E9%97%B4%E6%97%A0%E5%85%B3%E8%81%94%E7%9A%84%E5%86%85%E5%AE%B9%E4%BD%BF%E7%94%A8%E5%91%BD%E5%90%8D%E5%AF%BC%E5%87%BA"><span class="nav-number">2.11.2.</span> <span class="nav-text">[建议] 相互之间无关联的内容使用命名导出</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E6%89%80%E6%9C%89-import-%E8%AF%AD%E5%8F%A5%E5%86%99%E5%9C%A8%E6%A8%A1%E5%9D%97%E5%BC%80%E5%A7%8B%E5%A4%84"><span class="nav-number">2.11.3.</span> <span class="nav-text">[强制] 所有 import 语句写在模块开始处</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9B%86%E5%90%88"><span class="nav-number">2.12.</span> <span class="nav-text">集合</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E8%BF%9E%E6%8E%A5%E6%93%8D%E4%BD%9C%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E5%B1%95%E5%BC%80%E8%AF%AD%E6%B3%95"><span class="nav-number">2.12.1.</span> <span class="nav-text">[建议] 对数组进行连接操作时，使用数组展开语法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E5%B1%95%E5%BC%80%E8%BF%9B%E8%A1%8C%E6%95%B0%E7%BB%84%E7%9A%84%E5%A4%8D%E5%88%B6%E6%93%8D%E4%BD%9C"><span class="nav-number">2.12.2.</span> <span class="nav-text">[建议] 不要使用数组展开进行数组的复制操作</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E5%8F%AF%E8%83%BD%E4%BD%BF%E7%94%A8-for-of-%E8%BF%9B%E8%A1%8C%E9%81%8D%E5%8E%86"><span class="nav-number">2.12.3.</span> <span class="nav-text">[建议] 尽可能使用 for .. of 进行遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%BD%93%E9%94%AE%E5%80%BC%E6%9C%89%E5%8F%AF%E8%83%BD%E4%B8%8D%E6%98%AF%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%97%B6%EF%BC%8C%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8-Map%EF%BC%9B%E5%BD%93%E5%85%83%E7%B4%A0%E6%9C%89%E5%8F%AF%E8%83%BD%E4%B8%8D%E6%98%AF%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%97%B6%EF%BC%8C%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8-Set"><span class="nav-number">2.12.4.</span> <span class="nav-text">[强制] 当键值有可能不是字符串时，必须使用 Map；当元素有可能不是字符串时，必须使用 Set</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E9%9C%80%E8%A6%81%E4%B8%80%E4%B8%AA%E4%B8%8D%E5%8F%AF%E9%87%8D%E5%A4%8D%E7%9A%84%E9%9B%86%E5%90%88%E6%97%B6%EF%BC%8C%E5%BA%94%E4%BD%BF%E7%94%A8-Set"><span class="nav-number">2.12.5.</span> <span class="nav-text">[建议] 需要一个不可重复的集合时，应使用 Set</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%BD%93%E9%9C%80%E8%A6%81%E9%81%8D%E5%8E%86%E5%8A%9F%E8%83%BD%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-Map-%E5%92%8C-Set"><span class="nav-number">2.12.6.</span> <span class="nav-text">[建议] 当需要遍历功能时，使用 Map 和 Set</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%A8%8B%E5%BA%8F%E8%BF%90%E8%A1%8C%E8%BF%87%E7%A8%8B%E4%B8%AD%E6%9C%89%E6%B7%BB%E5%8A%A0%E6%88%96%E7%A7%BB%E9%99%A4%E5%85%83%E7%B4%A0%E7%9A%84%E6%93%8D%E4%BD%9C%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-Map-%E5%92%8C-Set"><span class="nav-number">2.12.7.</span> <span class="nav-text">[建议] 程序运行过程中有添加或移除元素的操作时，使用 Map 和 Set</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%BC%82%E6%AD%A5"><span class="nav-number">2.13.</span> <span class="nav-text">异步</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E7%9A%84%E5%B5%8C%E5%A5%97%E4%B8%8D%E5%BE%97%E8%B6%85%E8%BF%873%E5%B1%82"><span class="nav-number">2.13.1.</span> <span class="nav-text">[强制] 回调函数的嵌套不得超过3层</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-Promise-%E4%BB%A3%E6%9B%BF-callback"><span class="nav-number">2.13.2.</span> <span class="nav-text">[建议] 使用 Promise 代替 callback</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8%E6%A0%87%E5%87%86%E7%9A%84-Promise-API"><span class="nav-number">2.13.3.</span> <span class="nav-text">[强制] 使用标准的 Promise API</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E5%85%81%E8%AE%B8%E7%9B%B4%E6%8E%A5%E6%89%A9%E5%B1%95-Promise-%E5%AF%B9%E8%B1%A1%E7%9A%84-prototype"><span class="nav-number">2.13.4.</span> <span class="nav-text">[强制] 不允许直接扩展 Promise 对象的 prototype</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E5%BE%97%E4%B8%BA%E4%BA%86%E7%BC%96%E5%86%99%E7%9A%84%E6%96%B9%E4%BE%BF%EF%BC%8C%E5%B0%86%E5%8F%AF%E4%BB%A5%E5%B9%B6%E8%A1%8C%E7%9A%84IO%E8%BF%87%E7%A8%8B%E4%B8%B2%E8%A1%8C%E5%8C%96"><span class="nav-number">2.13.5.</span> <span class="nav-text">[强制] 不得为了编写的方便，将可以并行的IO过程串行化</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-async-await-%E4%BB%A3%E6%9B%BF-generator-co"><span class="nav-number">2.13.6.</span> <span class="nav-text">[建议] 使用 async&#x2F;await 代替 generator + co</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8A%A8%E6%80%81%E7%89%B9%E6%80%A7"><span class="nav-number">2.14.</span> <span class="nav-text">动态特性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#3-10-1-eval"><span class="nav-number">2.14.1.</span> <span class="nav-text">3.10.1 eval</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%E7%9B%B4%E6%8E%A5-eval-%E5%87%BD%E6%95%B0"><span class="nav-number">2.14.1.1.</span> <span class="nav-text">[强制] 避免使用直接 eval 函数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E9%87%8F%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8-eval-%E5%87%BD%E6%95%B0"><span class="nav-number">2.14.1.2.</span> <span class="nav-text">[建议] 尽量避免使用 eval 函数</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-10-2-%E5%8A%A8%E6%80%81%E6%89%A7%E8%A1%8C%E4%BB%A3%E7%A0%81"><span class="nav-number">2.14.2.</span> <span class="nav-text">3.10.2 动态执行代码</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-new-Function-%E6%89%A7%E8%A1%8C%E5%8A%A8%E6%80%81%E4%BB%A3%E7%A0%81"><span class="nav-number">2.14.2.1.</span> <span class="nav-text">[建议] 使用 new Function 执行动态代码</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-10-3-with"><span class="nav-number">2.14.3.</span> <span class="nav-text">3.10.3 with</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E9%87%8F%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8-with"><span class="nav-number">2.14.3.1.</span> <span class="nav-text">[建议] 尽量不要使用 with</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-10-4-delete"><span class="nav-number">2.14.4.</span> <span class="nav-text">3.10.4 delete</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%87%8F%E5%B0%91-delete-%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-number">2.14.4.1.</span> <span class="nav-text">[建议] 减少 delete 的使用</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%A4%84%E7%90%86-delete-%E5%8F%AF%E8%83%BD%E4%BA%A7%E7%94%9F%E7%9A%84%E5%BC%82%E5%B8%B8"><span class="nav-number">2.14.4.2.</span> <span class="nav-text">[建议] 处理 delete 可能产生的异常</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-10-5-%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="nav-number">2.14.5.</span> <span class="nav-text">3.10.5 对象属性</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E9%81%BF%E5%85%8D%E4%BF%AE%E6%94%B9%E5%A4%96%E9%83%A8%E4%BC%A0%E5%85%A5%E7%9A%84%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.14.5.1.</span> <span class="nav-text">[建议] 避免修改外部传入的对象</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%85%B7%E5%A4%87%E5%BC%BA%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%AE%BE%E8%AE%A1"><span class="nav-number">2.14.5.2.</span> <span class="nav-text">[建议] 具备强类型的设计</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83"><span class="nav-number">3.</span> <span class="nav-text">浏览器环境</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM"><span class="nav-number">3.1.</span> <span class="nav-text">DOM</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%85%83%E7%B4%A0%E8%8E%B7%E5%8F%96"><span class="nav-number">3.1.1.</span> <span class="nav-text">元素获取</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E4%BA%8E%E5%8D%95%E4%B8%AA%E5%85%83%E7%B4%A0%EF%BC%8C%E5%B0%BD%E5%8F%AF%E8%83%BD%E4%BD%BF%E7%94%A8-document-getElementById-%E8%8E%B7%E5%8F%96%EF%BC%8C%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8document-all"><span class="nav-number">3.1.1.1.</span> <span class="nav-text">[建议] 对于单个元素，尽可能使用 document.getElementById 获取，避免使用document.all</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E4%BA%8E%E5%A4%9A%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E9%9B%86%E5%90%88%EF%BC%8C%E5%B0%BD%E5%8F%AF%E8%83%BD%E4%BD%BF%E7%94%A8-context-getElementsByTagName-%E8%8E%B7%E5%8F%96%E3%80%82%E5%85%B6%E4%B8%AD-context-%E5%8F%AF%E4%BB%A5%E4%B8%BA-document-%E6%88%96%E5%85%B6%E4%BB%96%E5%85%83%E7%B4%A0%E3%80%82%E6%8C%87%E5%AE%9A-tagName-%E5%8F%82%E6%95%B0%E4%B8%BA-%E5%8F%AF%E4%BB%A5%E8%8E%B7%E5%BE%97%E6%89%80%E6%9C%89%E5%AD%90%E5%85%83%E7%B4%A0"><span class="nav-number">3.1.1.2.</span> <span class="nav-text">[建议] 对于多个元素的集合，尽可能使用 context.getElementsByTagName 获取。其中 context 可以为 document 或其他元素。指定 tagName 参数为 * 可以获得所有子元素</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E9%81%8D%E5%8E%86%E5%85%83%E7%B4%A0%E9%9B%86%E5%90%88%E6%97%B6%EF%BC%8C%E5%B0%BD%E9%87%8F%E7%BC%93%E5%AD%98%E9%9B%86%E5%90%88%E9%95%BF%E5%BA%A6%E3%80%82%E5%A6%82%E9%9C%80%E5%A4%9A%E6%AC%A1%E6%93%8D%E4%BD%9C%E5%90%8C%E4%B8%80%E9%9B%86%E5%90%88%EF%BC%8C%E5%88%99%E5%BA%94%E5%B0%86%E9%9B%86%E5%90%88%E8%BD%AC%E4%B8%BA%E6%95%B0%E7%BB%84"><span class="nav-number">3.1.1.3.</span> <span class="nav-text">[建议] 遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E7%9B%B4%E6%8E%A5%E5%AD%90%E5%85%83%E7%B4%A0%E6%97%B6%E4%BD%BF%E7%94%A8-children%E3%80%82%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8childNodes%EF%BC%8C%E9%99%A4%E9%9D%9E%E9%A2%84%E6%9C%9F%E6%98%AF%E9%9C%80%E8%A6%81%E5%8C%85%E5%90%AB%E6%96%87%E6%9C%AC%E3%80%81%E6%B3%A8%E9%87%8A%E5%92%8C%E5%B1%9E%E6%80%A7%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%8A%82%E7%82%B9"><span class="nav-number">3.1.1.4.</span> <span class="nav-text">[建议] 获取元素的直接子元素时使用 children。避免使用childNodes，除非预期是需要包含文本、注释和属性类型的节点</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A0%B7%E5%BC%8F%E8%8E%B7%E5%8F%96"><span class="nav-number">3.1.2.</span> <span class="nav-text">样式获取</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%AE%9E%E9%99%85%E6%A0%B7%E5%BC%8F%E4%BF%A1%E6%81%AF%E6%97%B6%EF%BC%8C%E5%BA%94%E4%BD%BF%E7%94%A8-getComputedStyle-%E6%88%96-currentStyle"><span class="nav-number">3.1.2.1.</span> <span class="nav-text">[建议] 获取元素实际样式信息时，应使用 getComputedStyle 或 currentStyle</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE"><span class="nav-number">3.1.3.</span> <span class="nav-text">样式设置</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E5%8F%AF%E8%83%BD%E9%80%9A%E8%BF%87%E4%B8%BA%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E9%A2%84%E5%AE%9A%E4%B9%89%E7%9A%84-className-%E6%9D%A5%E6%94%B9%E5%8F%98%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F%EF%BC%8C%E9%81%BF%E5%85%8D%E7%9B%B4%E6%8E%A5%E6%93%8D%E4%BD%9C-style-%E8%AE%BE%E7%BD%AE"><span class="nav-number">3.1.3.1.</span> <span class="nav-text">[建议] 尽可能通过为元素添加预定义的 className 来改变元素样式，避免直接操作 style 设置</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E9%80%9A%E8%BF%87-style-%E5%AF%B9%E8%B1%A1%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F%E6%97%B6%EF%BC%8C%E5%AF%B9%E4%BA%8E%E5%B8%A6%E5%8D%95%E4%BD%8D%E9%9D%9E-0-%E5%80%BC%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8C%E4%B8%8D%E5%85%81%E8%AE%B8%E7%9C%81%E7%95%A5%E5%8D%95%E4%BD%8D"><span class="nav-number">3.1.3.2.</span> <span class="nav-text">[强制] 通过 style 对象设置元素样式时，对于带单位非 0 值的属性，不允许省略单位</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM-%E6%93%8D%E4%BD%9C"><span class="nav-number">3.1.4.</span> <span class="nav-text">DOM 操作</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E6%93%8D%E4%BD%9C-DOM-%E6%97%B6%EF%BC%8C%E5%B0%BD%E9%87%8F%E5%87%8F%E5%B0%91%E9%A1%B5%E9%9D%A2-reflow"><span class="nav-number">3.1.4.1.</span> <span class="nav-text">[建议] 操作 DOM 时，尽量减少页面 reflow</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E9%87%8F%E5%87%8F%E5%B0%91-DOM-%E6%93%8D%E4%BD%9C"><span class="nav-number">3.1.4.2.</span> <span class="nav-text">[建议] 尽量减少 DOM 操作</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM-%E4%BA%8B%E4%BB%B6"><span class="nav-number">3.1.5.</span> <span class="nav-text">DOM 事件</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BC%98%E5%85%88%E4%BD%BF%E7%94%A8-addEventListener-attachEvent-%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%EF%BC%8C%E9%81%BF%E5%85%8D%E7%9B%B4%E6%8E%A5%E5%9C%A8-HTML-%E5%B1%9E%E6%80%A7%E4%B8%AD%E6%88%96-DOM-%E7%9A%84-expando-%E5%B1%9E%E6%80%A7%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="nav-number">3.1.5.1.</span> <span class="nav-text">[建议] 优先使用 addEventListener &#x2F; attachEvent 绑定事件，避免直接在 HTML 属性中或 DOM 的 expando 属性绑定事件处理</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-addEventListener-%E6%97%B6%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0%E4%BD%BF%E7%94%A8-false"><span class="nav-number">3.1.5.2.</span> <span class="nav-text">[建议] 使用 addEventListener 时第三个参数使用 false</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%9C%A8%E6%B2%A1%E6%9C%89%E4%BA%8B%E4%BB%B6%E8%87%AA%E5%8A%A8%E7%AE%A1%E7%90%86%E7%9A%84%E6%A1%86%E6%9E%B6%E6%94%AF%E6%8C%81%E4%B8%8B%EF%BC%8C%E5%BA%94%E6%8C%81%E6%9C%89%E7%9B%91%E5%90%AC%E5%99%A8%E5%87%BD%E6%95%B0%E7%9A%84%E5%BC%95%E7%94%A8%EF%BC%8C%E5%9C%A8%E9%80%82%E5%BD%93%E6%97%B6%E5%80%99%EF%BC%88%E5%85%83%E7%B4%A0%E9%87%8A%E6%94%BE%E3%80%81%E9%A1%B5%E9%9D%A2%E5%8D%B8%E8%BD%BD%E7%AD%89%EF%BC%89%E7%A7%BB%E9%99%A4%E6%B7%BB%E5%8A%A0%E7%9A%84%E7%9B%91%E5%90%AC%E5%99%A8"><span class="nav-number">3.1.5.3.</span> <span class="nav-text">[建议] 在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器</span></a></li></ol></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">郭泽</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">54</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">21</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">51</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner page posts-expand">


    
    
    
    <div class="post-block" lang="zh-CN"><header class="post-header">

<h1 class="post-title" itemprop="name headline">
</h1>

<div class="post-meta-container">
</div>

</header>

      
      
      <div class="post-body">
          <h2 id="代码风格"><a href="#代码风格" class="headerlink" title="代码风格"></a>代码风格</h2><h3 id="结构"><a href="#结构" class="headerlink" title="结构"></a>结构</h3><h4 id="缩进"><a href="#缩进" class="headerlink" title="缩进"></a>缩进</h4><h5 id="强制-使用-2-个空格做为一个缩进层级"><a href="#强制-使用-2-个空格做为一个缩进层级" class="headerlink" title="[强制] 使用 2 个空格做为一个缩进层级"></a>[强制] 使用 <code>2</code> 个空格做为一个缩进层级</h5><h5 id="强制-switch-下的-case-和-default-必须增加一个缩进层级"><a href="#强制-switch-下的-case-和-default-必须增加一个缩进层级" class="headerlink" title="[强制] switch 下的 case 和 default 必须增加一个缩进层级"></a>[强制] <code>switch</code> 下的 <code>case</code> 和 <code>default</code> 必须增加一个缩进层级</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">switch</span> (variable) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;1&#x27;</span>:</span><br><span class="line">        <span class="comment">// do...</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;2&#x27;</span>:</span><br><span class="line">        <span class="comment">// do...</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">        <span class="comment">// do...</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">switch</span> (variable) &#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">case</span> <span class="string">&#x27;1&#x27;</span>:</span><br><span class="line">    <span class="comment">// do...</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">case</span> <span class="string">&#x27;2&#x27;</span>:</span><br><span class="line">    <span class="comment">// do...</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">default</span>:</span><br><span class="line">    <span class="comment">// do...</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="空格"><a href="#空格" class="headerlink" title="空格"></a>空格</h4><h5 id="强制-二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格"><a href="#强制-二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格" class="headerlink" title="[强制] 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格"></a>[强制] 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = !arr.length;</span><br><span class="line">a++;</span><br><span class="line">a = b + c;</span><br></pre></td></tr></table></figure>

<h5 id="强制-用作代码块起始的左花括号-前必须有一个空格"><a href="#强制-用作代码块起始的左花括号-前必须有一个空格" class="headerlink" title="[强制] 用作代码块起始的左花括号 { 前必须有一个空格"></a>[强制] 用作代码块起始的左花括号 <code>&#123;</code> 前必须有一个空格</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (condition)&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (condition)&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-if-else-for-while-function-switch-do-try-catch-finally-关键字后，必须有一个空格"><a href="#强制-if-else-for-while-function-switch-do-try-catch-finally-关键字后，必须有一个空格" class="headerlink" title="[强制] if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格"></a>[强制] <code>if / else / for / while / function / switch / do / try / catch / finally</code> 关键字后，必须有一个空格</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (condition) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="title">if</span>(<span class="params">condition</span>)</span> &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="title">while</span>(<span class="params">condition</span>)</span> &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<h5 id="强制-在对象创建时，属性中的-之后必须有空格，-之前不允许有空格"><a href="#强制-在对象创建时，属性中的-之后必须有空格，-之前不允许有空格" class="headerlink" title="[强制] 在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格"></a>[强制] 在对象创建时，属性中的 <code>:</code> 之后必须有空格，<code>:</code> 之前不允许有空格</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span>,</span><br><span class="line">    c: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a : <span class="number">1</span>,</span><br><span class="line">    b:<span class="number">2</span>,</span><br><span class="line">    c :<span class="number">3</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-函数声明、具名函数表达式、函数调用中，函数名和-之间不允许有空格"><a href="#强制-函数声明、具名函数表达式、函数调用中，函数名和-之间不允许有空格" class="headerlink" title="[强制] 函数声明、具名函数表达式、函数调用中，函数名和 ( 之间不允许有空格"></a>[强制] 函数声明、具名函数表达式、函数调用中，函数名和 <code>(</code> 之间不允许有空格</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> funcName = <span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">funcName();</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> funcName = <span class="function"><span class="keyword">function</span> <span class="title">funcName</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">funcName ();</span><br></pre></td></tr></table></figure>

<h5 id="强制-和-前不允许有空格。如果不位于行尾，-和-后必须跟一个空格"><a href="#强制-和-前不允许有空格。如果不位于行尾，-和-后必须跟一个空格" class="headerlink" title="[强制] , 和 ; 前不允许有空格。如果不位于行尾，, 和 ; 后必须跟一个空格"></a>[强制] <code>,</code> 和 <code>;</code> 前不允许有空格。如果不位于行尾，<code>,</code> 和 <code>;</code> 后必须跟一个空格</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">callFunc(a, b);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">callFunc(a , b) ;</span><br></pre></td></tr></table></figure>

<h5 id="强制-在函数调用、函数声明、括号表达式、属性访问、if-for-while-switch-catch-等语句中，-和-内紧贴括号部分不允许有空格"><a href="#强制-在函数调用、函数声明、括号表达式、属性访问、if-for-while-switch-catch-等语句中，-和-内紧贴括号部分不允许有空格" class="headerlink" title="[强制] 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中，() 和 [] 内紧贴括号部分不允许有空格"></a>[强制] 在函数调用、函数声明、括号表达式、属性访问、<code>if / for / while / switch / catch</code> 等语句中，<code>()</code> 和 <code>[]</code> 内紧贴括号部分不允许有空格</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"></span><br><span class="line">callFunc(param1, param2, param3);</span><br><span class="line"></span><br><span class="line">save(<span class="built_in">this</span>.list[<span class="built_in">this</span>.indexes[i]]);</span><br><span class="line"></span><br><span class="line">needIncream &amp;&amp; (variable += increament);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (num &gt; list.length) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (len--) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"></span><br><span class="line">callFunc( param1, param2, param3 );</span><br><span class="line"></span><br><span class="line">save( <span class="built_in">this</span>.list[ <span class="built_in">this</span>.indexes[ i ] ] );</span><br><span class="line"></span><br><span class="line">needIncreament &amp;&amp; ( variable += increament );</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> ( num &gt; list.length ) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> ( len-- ) &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-单行声明的数组与对象，如果包含元素，-和-内紧贴括号部分不允许包含空格"><a href="#强制-单行声明的数组与对象，如果包含元素，-和-内紧贴括号部分不允许包含空格" class="headerlink" title="[强制] 单行声明的数组与对象，如果包含元素，{} 和 [] 内紧贴括号部分不允许包含空格"></a>[强制] 单行声明的数组与对象，如果包含元素，<code>&#123;&#125;</code> 和 <code>[]</code> 内紧贴括号部分不允许包含空格</h5><p>解释：</p>
<p>声明包含元素的数组与对象，只有当内部元素的形式较为简单时，才允许写在一行。元素复杂的情况，还是应该换行书写。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [];</span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;&#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;<span class="attr">name</span>: <span class="string">&#x27;obj&#x27;</span>&#125;;</span><br><span class="line"><span class="keyword">var</span> obj3 = &#123;</span><br><span class="line">    name: <span class="string">&#x27;obj&#x27;</span>,</span><br><span class="line">    age: <span class="number">20</span>,</span><br><span class="line">    sex: <span class="number">1</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [ ];</span><br><span class="line"><span class="keyword">var</span> arr2 = [ <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span> ];</span><br><span class="line"><span class="keyword">var</span> obj1 = &#123; &#125;;</span><br><span class="line"><span class="keyword">var</span> obj2 = &#123; <span class="attr">name</span>: <span class="string">&#x27;obj&#x27;</span> &#125;;</span><br><span class="line"><span class="keyword">var</span> obj3 = &#123;<span class="attr">name</span>: <span class="string">&#x27;obj&#x27;</span>, <span class="attr">age</span>: <span class="number">20</span>, <span class="attr">sex</span>: <span class="number">1</span>&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-行尾不得有多余的空格"><a href="#强制-行尾不得有多余的空格" class="headerlink" title="[强制] 行尾不得有多余的空格"></a>[强制] 行尾不得有多余的空格</h5><h4 id="换行"><a href="#换行" class="headerlink" title="换行"></a>换行</h4><h5 id="强制-每个独立语句结束后必须换行"><a href="#强制-每个独立语句结束后必须换行" class="headerlink" title="[强制] 每个独立语句结束后必须换行"></a>[强制] 每个独立语句结束后必须换行</h5><h5 id="强制-每行不得超过-120-个字符"><a href="#强制-每行不得超过-120-个字符" class="headerlink" title="[强制] 每行不得超过 120 个字符"></a>[强制] 每行不得超过 <code>120</code> 个字符</h5><p>解释：</p>
<p>超长的不可分割的代码允许例外，比如复杂的正则表达式。长字符串不在例外之列。</p>
<h5 id="强制-运算符处换行时，运算符必须在新行的行首"><a href="#强制-运算符处换行时，运算符必须在新行的行首" class="headerlink" title="[强制] 运算符处换行时，运算符必须在新行的行首"></a>[强制] 运算符处换行时，运算符必须在新行的行首</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (user.isAuthenticated()</span><br><span class="line">    &amp;&amp; user.isInRole(<span class="string">&#x27;admin&#x27;</span>)</span><br><span class="line">    &amp;&amp; user.hasAuthority(<span class="string">&#x27;add-admin&#x27;</span>)</span><br><span class="line">    || user.hasAuthority(<span class="string">&#x27;delete-admin&#x27;</span>)</span><br><span class="line">) &#123;</span><br><span class="line">    <span class="comment">// Code</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = number1 + number2 + number3</span><br><span class="line">    + number4 + number5;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (user.isAuthenticated() &amp;&amp;</span><br><span class="line">    user.isInRole(<span class="string">&#x27;admin&#x27;</span>) &amp;&amp;</span><br><span class="line">    user.hasAuthority(<span class="string">&#x27;add-admin&#x27;</span>) ||</span><br><span class="line">    user.hasAuthority(<span class="string">&#x27;delete-admin&#x27;</span>)) &#123;</span><br><span class="line">    <span class="comment">// Code</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = number1 + number2 + number3 +</span><br><span class="line">    number4 + number5;</span><br></pre></td></tr></table></figure>

<h5 id="强制-在函数声明、函数表达式、函数调用、对象创建、数组创建、for-语句等场景中，不允许在-或-前换行"><a href="#强制-在函数声明、函数表达式、函数调用、对象创建、数组创建、for-语句等场景中，不允许在-或-前换行" class="headerlink" title="[强制] 在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中，不允许在 , 或 ; 前换行"></a>[强制] 在函数声明、函数表达式、函数调用、对象创建、数组创建、<code>for</code> 语句等场景中，不允许在 <code>,</code> 或 <code>;</code> 前换行</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span>,</span><br><span class="line">    c: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">foo(</span><br><span class="line">    aVeryVeryLongArgument,</span><br><span class="line">    anotherVeryLongArgument,</span><br><span class="line">    callback</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span></span><br><span class="line">    , <span class="attr">b</span>: <span class="number">2</span></span><br><span class="line">    , <span class="attr">c</span>: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">foo(</span><br><span class="line">    aVeryVeryLongArgument</span><br><span class="line">    , anotherVeryLongArgument</span><br><span class="line">    , callback</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="建议-不同行为或逻辑的语句集，使用空行隔开，更易阅读"><a href="#建议-不同行为或逻辑的语句集，使用空行隔开，更易阅读" class="headerlink" title="[建议] 不同行为或逻辑的语句集，使用空行隔开，更易阅读"></a>[建议] 不同行为或逻辑的语句集，使用空行隔开，更易阅读</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 仅为按逻辑换行的示例，不代表setStyle的最优实现</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setStyle</span>(<span class="params">element, property, value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (element == <span class="literal">null</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    element.style[property] = value;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-在语句的行长度超过-120-时，根据逻辑条件合理缩进"><a href="#建议-在语句的行长度超过-120-时，根据逻辑条件合理缩进" class="headerlink" title="[建议] 在语句的行长度超过 120 时，根据逻辑条件合理缩进"></a>[建议] 在语句的行长度超过 <code>120</code> 时，根据逻辑条件合理缩进</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 较复杂的逻辑条件组合，将每个条件独立一行，逻辑运算符放置在行首进行分隔，或将部分逻辑按逻辑组合进行分隔。</span></span><br><span class="line"><span class="comment">// 建议最终将右括号 ) 与左大括号 &#123; 放在独立一行，保证与 `if` 内语句块能容易视觉辨识。</span></span><br><span class="line"><span class="keyword">if</span> (user.isAuthenticated()</span><br><span class="line">    &amp;&amp; user.isInRole(<span class="string">&#x27;admin&#x27;</span>)</span><br><span class="line">    &amp;&amp; user.hasAuthority(<span class="string">&#x27;add-admin&#x27;</span>)</span><br><span class="line">    || user.hasAuthority(<span class="string">&#x27;delete-admin&#x27;</span>)</span><br><span class="line">) &#123;</span><br><span class="line">    <span class="comment">// Code</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 按一定长度截断字符串，并使用 + 运算符进行连接。</span></span><br><span class="line"><span class="comment">// 分隔字符串尽量按语义进行，如不要在一个完整的名词中间断开。</span></span><br><span class="line"><span class="comment">// 特别的，对于 HTML 片段的拼接，通过缩进，保持和 HTML 相同的结构。</span></span><br><span class="line"><span class="keyword">var</span> html = <span class="string">&#x27;&#x27;</span> <span class="comment">// 此处用一个空字符串，以便整个 HTML 片段都在新行严格对齐</span></span><br><span class="line">    + <span class="string">&#x27;&lt;article&gt;&#x27;</span></span><br><span class="line">    +     <span class="string">&#x27;&lt;h1&gt;Title here&lt;/h1&gt;&#x27;</span></span><br><span class="line">    +     <span class="string">&#x27;&lt;p&gt;This is a paragraph&lt;/p&gt;&#x27;</span></span><br><span class="line">    +     <span class="string">&#x27;&lt;footer&gt;Complete&lt;/footer&gt;&#x27;</span></span><br><span class="line">    + <span class="string">&#x27;&lt;/article&gt;&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 也可使用数组来进行拼接，相对 `+` 更容易调整缩进。</span></span><br><span class="line"><span class="keyword">var</span> html = [</span><br><span class="line">    <span class="string">&#x27;&lt;article&gt;&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;&lt;h1&gt;Title here&lt;/h1&gt;&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;&lt;p&gt;This is a paragraph&lt;/p&gt;&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;&lt;footer&gt;Complete&lt;/footer&gt;&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;&lt;/article&gt;&#x27;</span></span><br><span class="line">];</span><br><span class="line">html = html.join(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 当参数过多时，将每个参数独立写在一行上，并将结束的右括号 ) 独立一行。</span></span><br><span class="line"><span class="comment">// 所有参数必须增加一个缩进。</span></span><br><span class="line">foo(</span><br><span class="line">    aVeryVeryLongArgument,</span><br><span class="line">    anotherVeryLongArgument,</span><br><span class="line">    callback</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 也可以按逻辑对参数进行组合。</span></span><br><span class="line"><span class="comment">// 最经典的是 baidu.format 函数，调用时将参数分为“模板”和“数据”两块</span></span><br><span class="line">baidu.format(</span><br><span class="line">    dateFormatTemplate,</span><br><span class="line">    year, month, date, hour, minute, second</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 当函数调用时，如果有一个或以上参数跨越多行，应当每一个参数独立一行。</span></span><br><span class="line"><span class="comment">// 这通常出现在匿名函数或者对象初始化等作为参数时，如 `setTimeout` 函数等。</span></span><br><span class="line"><span class="built_in">setTimeout</span>(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        alert(<span class="string">&#x27;hello&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="number">200</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line">order.data.read(</span><br><span class="line">    <span class="string">&#x27;id=&#x27;</span> + me.model.id,</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">        me.attchToModel(data.result);</span><br><span class="line">        callback();</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="number">300</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 链式调用较长时采用缩进进行调整。</span></span><br><span class="line">$(<span class="string">&#x27;#items&#x27;</span>)</span><br><span class="line">    .find(<span class="string">&#x27;.selected&#x27;</span>)</span><br><span class="line">    .highlight()</span><br><span class="line">    .end();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 三元运算符由3部分组成，因此其换行应当根据每个部分的长度不同，形成不同的情况。</span></span><br><span class="line"><span class="keyword">var</span> result = thisIsAVeryVeryLongCondition</span><br><span class="line">    ? resultA : resultB;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = condition</span><br><span class="line">    ? thisIsAVeryVeryLongResult</span><br><span class="line">    : resultB;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组和对象初始化的混用，严格按照每个对象的 `&#123;` 和结束 `&#125;` 在独立一行的风格书写。</span></span><br><span class="line"><span class="keyword">var</span> array = [</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">    &#125;</span><br><span class="line">];</span><br></pre></td></tr></table></figure>

<h5 id="建议-对于-if-else-、try-catch-finally-等语句，推荐使用在-号后添加一个换行-的风格，使代码层次结构更清晰，阅读性更好"><a href="#建议-对于-if-else-、try-catch-finally-等语句，推荐使用在-号后添加一个换行-的风格，使代码层次结构更清晰，阅读性更好" class="headerlink" title="[建议] 对于 if...else...、try...catch...finally 等语句，推荐使用在 } 号后添加一个换行 的风格，使代码层次结构更清晰，阅读性更好"></a>[建议] 对于 <code>if...else...</code>、<code>try...catch...finally</code> 等语句，推荐使用在 <code>&#125;</code> 号后添加一个换行 的风格，使代码层次结构更清晰，阅读性更好</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">    <span class="comment">// some statements;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// some statements;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="comment">// some statements;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">catch</span> (ex) &#123;</span><br><span class="line">    <span class="comment">// some statements;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="语句"><a href="#语句" class="headerlink" title="语句"></a>语句</h4><h5 id="强制-不得省略语句结束的分号"><a href="#强制-不得省略语句结束的分号" class="headerlink" title="[强制] 不得省略语句结束的分号"></a>[强制] 不得省略语句结束的分号</h5><h5 id="强制-在-if-else-for-do-while-语句中，即使只有一行，也不得省略块"><a href="#强制-在-if-else-for-do-while-语句中，即使只有一行，也不得省略块" class="headerlink" title="[强制] 在 if / else / for / do / while 语句中，即使只有一行，也不得省略块 {...}"></a>[强制] 在 <code>if / else / for / do / while</code> 语句中，即使只有一行，也不得省略块 <code>&#123;...&#125;</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (condition) &#123;</span><br><span class="line">    callFunc();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (condition) callFunc();</span><br><span class="line"><span class="keyword">if</span> (condition)</span><br><span class="line">    callFunc();</span><br></pre></td></tr></table></figure>

<h5 id="强制-函数定义结束不允许添加分号"><a href="#强制-函数定义结束不允许添加分号" class="headerlink" title="[强制] 函数定义结束不允许添加分号"></a>[强制] 函数定义结束不允许添加分号</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是函数表达式，分号是不允许省略的。</span></span><br><span class="line"><span class="keyword">var</span> funcName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-IIFE-必须在函数表达式外添加-，非-IIFE-不得在函数表达式外添加"><a href="#强制-IIFE-必须在函数表达式外添加-，非-IIFE-不得在函数表达式外添加" class="headerlink" title="[强制] IIFE 必须在函数表达式外添加 (，非 IIFE 不得在函数表达式外添加 ("></a>[强制] <code>IIFE</code> 必须在函数表达式外添加 <code>(</code>，非 <code>IIFE</code> 不得在函数表达式外添加 <code>(</code></h5><p>解释：</p>
<p>IIFE = Immediately-Invoked Function Expression.</p>
<p>额外的 ( 能够让代码在阅读的一开始就能判断函数是否立即被调用，进而明白接下来代码的用途。而不是一直拖到底部才恍然大悟。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> task = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">   <span class="comment">// Code</span></span><br><span class="line">   <span class="keyword">return</span> result;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> func = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> task = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Code</span></span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> func = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="命名"><a href="#命名" class="headerlink" title="命名"></a>命名</h3><h5 id="强制-变量-使用-Camel命名法"><a href="#强制-变量-使用-Camel命名法" class="headerlink" title="[强制] 变量 使用 Camel命名法"></a>[强制] <code>变量</code> 使用 <code>Camel命名法</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> loadingModules = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-常量-使用-全部字母大写，单词间下划线分隔-的命名方式"><a href="#强制-常量-使用-全部字母大写，单词间下划线分隔-的命名方式" class="headerlink" title="[强制] 常量 使用 全部字母大写，单词间下划线分隔 的命名方式"></a>[强制] <code>常量</code> 使用 <code>全部字母大写，单词间下划线分隔</code> 的命名方式</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> HTML_ENTITY = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-函数-使用-Camel命名法"><a href="#强制-函数-使用-Camel命名法" class="headerlink" title="[强制] 函数 使用 Camel命名法"></a>[强制] <code>函数</code> 使用 <code>Camel命名法</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">stringFormat</span>(<span class="params">source</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-函数的-参数-使用-Camel命名法"><a href="#强制-函数的-参数-使用-Camel命名法" class="headerlink" title="[强制] 函数的 参数 使用 Camel命名法"></a>[强制] 函数的 <code>参数</code> 使用 <code>Camel命名法</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">hear</span>(<span class="params">theBells</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-类-使用-Pascal命名法"><a href="#强制-类-使用-Pascal命名法" class="headerlink" title="[强制] 类 使用 Pascal命名法"></a>[强制] <code>类</code> 使用 <code>Pascal命名法</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">TextNode</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-类的-方法-属性-使用-Camel命名法"><a href="#强制-类的-方法-属性-使用-Camel命名法" class="headerlink" title="[强制] 类的 方法 / 属性 使用 Camel命名法"></a>[强制] 类的 <code>方法</code> / <code>属性</code> 使用 <code>Camel命名法</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">TextNode</span>(<span class="params">value, engine</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.value = value;</span><br><span class="line">    <span class="built_in">this</span>.engine = engine;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">TextNode.prototype.clone = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-枚举变量-使用-Pascal命名法，枚举的属性-使用-全部字母大写，单词间下划线分隔-的命名方式"><a href="#强制-枚举变量-使用-Pascal命名法，枚举的属性-使用-全部字母大写，单词间下划线分隔-的命名方式" class="headerlink" title="[强制] 枚举变量 使用 Pascal命名法，枚举的属性 使用 全部字母大写，单词间下划线分隔 的命名方式"></a>[强制] <code>枚举变量</code> 使用 <code>Pascal命名法</code>，<code>枚举的属性</code> 使用 <code>全部字母大写，单词间下划线分隔</code> 的命名方式</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> TargetState = &#123;</span><br><span class="line">    READING: <span class="number">1</span>,</span><br><span class="line">    READED: <span class="number">2</span>,</span><br><span class="line">    APPLIED: <span class="number">3</span>,</span><br><span class="line">    READY: <span class="number">4</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-命名空间-使用-Camel命名法"><a href="#强制-命名空间-使用-Camel命名法" class="headerlink" title="[强制] 命名空间 使用 Camel命名法"></a>[强制] <code>命名空间</code> 使用 <code>Camel命名法</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">equipments.heavyWeapons = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="强制-由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致"><a href="#强制-由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致" class="headerlink" title="[强制] 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致"></a>[强制] 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">XMLParser</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">insertHTML</span>(<span class="params">element, html</span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> httpRequest = <span class="keyword">new</span> HTTPRequest();</span><br></pre></td></tr></table></figure>

<h5 id="强制-类名-使用-名词"><a href="#强制-类名-使用-名词" class="headerlink" title="[强制] 类名 使用 名词"></a>[强制] <code>类名</code> 使用 <code>名词</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Engine</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-函数名-使用-动宾短语"><a href="#建议-函数名-使用-动宾短语" class="headerlink" title="[建议] 函数名 使用 动宾短语"></a>[建议] <code>函数名</code> 使用 <code>动宾短语</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">element</span>) </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-boolean-类型的变量使用-is-或-has-开头"><a href="#建议-boolean-类型的变量使用-is-或-has-开头" class="headerlink" title="[建议] boolean 类型的变量使用 is 或 has 开头"></a>[建议] <code>boolean</code> 类型的变量使用 <code>is</code> 或 <code>has</code> 开头</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> isReady = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">var</span> hasMoreCommands = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>

<h5 id="建议-Promise对象-用-动宾短语的进行时-表达"><a href="#建议-Promise对象-用-动宾短语的进行时-表达" class="headerlink" title="[建议] Promise对象 用 动宾短语的进行时 表达"></a>[建议] <code>Promise对象</code> 用 <code>动宾短语的进行时</code> 表达</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> loadingData = ajax.get(<span class="string">&#x27;url&#x27;</span>);</span><br><span class="line">loadingData.then(callback);</span><br></pre></td></tr></table></figure>

<h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h3><h4 id="单行注释"><a href="#单行注释" class="headerlink" title="单行注释"></a>单行注释</h4><h5 id="强制-必须独占一行。-后跟一个空格，缩进与下一行被注释说明的代码一致"><a href="#强制-必须独占一行。-后跟一个空格，缩进与下一行被注释说明的代码一致" class="headerlink" title="[强制] 必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致"></a>[强制] 必须独占一行。<code>//</code> 后跟一个空格，缩进与下一行被注释说明的代码一致</h5><h4 id="多行注释"><a href="#多行注释" class="headerlink" title="多行注释"></a>多行注释</h4><h5 id="建议-避免使用-这样的多行注释。有多行注释内容时，使用多个单行注释"><a href="#建议-避免使用-这样的多行注释。有多行注释内容时，使用多个单行注释" class="headerlink" title="[建议] 避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释"></a>[建议] 避免使用 <code>/*...*/</code> 这样的多行注释。有多行注释内容时，使用多个单行注释</h5><h4 id="文档化注释"><a href="#文档化注释" class="headerlink" title="文档化注释"></a>文档化注释</h4><h5 id="强制-为了便于代码阅读和自文档化，以下内容必须包含以-形式的块注释中"><a href="#强制-为了便于代码阅读和自文档化，以下内容必须包含以-形式的块注释中" class="headerlink" title="[强制] 为了便于代码阅读和自文档化，以下内容必须包含以 /**...*/ 形式的块注释中"></a>[强制] 为了便于代码阅读和自文档化，以下内容必须包含以 <code>/**...*/</code> 形式的块注释中</h5><p>解释：</p>
<ol>
<li>文件</li>
<li>namespace</li>
<li>类</li>
<li>函数或方法</li>
<li>类属性</li>
<li>事件</li>
<li>全局变量</li>
<li>常量</li>
<li>AMD 模块</li>
</ol>
<h5 id="强制-文档注释前必须空一行"><a href="#强制-文档注释前必须空一行" class="headerlink" title="[强制] 文档注释前必须空一行"></a>[强制] 文档注释前必须空一行</h5><h5 id="建议-自文档化的文档说明-what，而不是-how"><a href="#建议-自文档化的文档说明-what，而不是-how" class="headerlink" title="[建议] 自文档化的文档说明 what，而不是 how"></a>[建议] 自文档化的文档说明 what，而不是 how</h5><h4 id="类型定义"><a href="#类型定义" class="headerlink" title="类型定义"></a>类型定义</h4><h5 id="强制-类型定义都是以-开始-以-结束"><a href="#强制-类型定义都是以-开始-以-结束" class="headerlink" title="[强制] 类型定义都是以 { 开始, 以 } 结束"></a>[强制] 类型定义都是以 <code>&#123;</code> 开始, 以 <code>&#125;</code> 结束</h5><p>解释：</p>
<p>常用类型如：{string}, {number}, {boolean}, {Object}, {Function}, {RegExp}, {Array}, {Date}。</p>
<p>类型不仅局限于内置的类型，也可以是自定义的类型。比如定义了一个类 Developer，就可以使用它来定义一个参数和返回值的类型。</p>
<h5 id="强制-对于基本类型-string-number-boolean-，首字母必须小写"><a href="#强制-对于基本类型-string-number-boolean-，首字母必须小写" class="headerlink" title="[强制] 对于基本类型 {string}, {number}, {boolean}，首字母必须小写"></a>[强制] 对于基本类型 {string}, {number}, {boolean}，首字母必须小写</h5><table>
<thead>
<tr>
<th>类型定义</th>
<th>语法示例</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>String</td>
<td>{string}</td>
<td>–</td>
</tr>
<tr>
<td>Number</td>
<td>{number}</td>
<td>–</td>
</tr>
<tr>
<td>Boolean</td>
<td>{boolean}</td>
<td>–</td>
</tr>
<tr>
<td>Object</td>
<td>{Object}</td>
<td>–</td>
</tr>
<tr>
<td>Function</td>
<td>{Function}</td>
<td>–</td>
</tr>
<tr>
<td>RegExp</td>
<td>{RegExp}</td>
<td>–</td>
</tr>
<tr>
<td>Array</td>
<td>{Array}</td>
<td>–</td>
</tr>
<tr>
<td>Date</td>
<td>{Date}</td>
<td>–</td>
</tr>
<tr>
<td>单一类型集合</td>
<td>{Array.&lt;string&gt;}</td>
<td>string 类型的数组</td>
</tr>
<tr>
<td>多类型</td>
<td>{(number｜boolean)}</td>
<td>可能是 number 类型, 也可能是 boolean 类型</td>
</tr>
<tr>
<td>允许为null</td>
<td>{?number}</td>
<td>可能是 number, 也可能是 null</td>
</tr>
<tr>
<td>不允许为null</td>
<td>{!Object}</td>
<td>Object 类型, 但不是 null</td>
</tr>
<tr>
<td>Function类型</td>
<td>{function(number, boolean)}</td>
<td>函数, 形参类型</td>
</tr>
<tr>
<td>Function带返回值</td>
<td>{function(number, boolean):string}</td>
<td>函数, 形参, 返回值类型</td>
</tr>
<tr>
<td>Promise</td>
<td>Promise.&lt;resolveType, rejectType&gt;</td>
<td>Promise，成功返回的数据类型，失败返回的错误类型</td>
</tr>
<tr>
<td>参数可选</td>
<td>@param {string=} name</td>
<td>可选参数, =为类型后缀</td>
</tr>
<tr>
<td>可变参数</td>
<td>@param {…number} args</td>
<td>变长参数,  …为类型前缀</td>
</tr>
<tr>
<td>任意类型</td>
<td>{*}</td>
<td>任意类型</td>
</tr>
<tr>
<td>可选任意类型</td>
<td>@param {*=} name</td>
<td>可选参数，类型不限</td>
</tr>
<tr>
<td>可变任意类型</td>
<td>@param {…*} args</td>
<td>变长参数，类型不限</td>
</tr>
</tbody></table>
<h4 id="文件注释"><a href="#文件注释" class="headerlink" title="文件注释"></a>文件注释</h4><h5 id="强制-文件顶部必须包含文件注释，用-file-标识文件说明"><a href="#强制-文件顶部必须包含文件注释，用-file-标识文件说明" class="headerlink" title="[强制] 文件顶部必须包含文件注释，用 @file 标识文件说明"></a>[强制] 文件顶部必须包含文件注释，用 <code>@file</code> 标识文件说明</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@file </span>Describe the file</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>

<h5 id="建议-文件注释中可以用-author-标识开发者信息"><a href="#建议-文件注释中可以用-author-标识开发者信息" class="headerlink" title="[建议] 文件注释中可以用 @author 标识开发者信息"></a>[建议] 文件注释中可以用 <code>@author</code> 标识开发者信息</h5><p>解释：</p>
<p>开发者信息能够体现开发人员对文件的贡献，并且能够让遇到问题或希望了解相关信息的人找到维护人。通常情况文件在被创建时标识的是创建者。随着项目的进展，越来越多的人加入，参与这个文件的开发，新的作者应该被加入 <code>@author</code> 标识。</p>
<p><code>@author</code> 标识具有多人时，原则是按照 <code>责任</code> 进行排序。通常的说就是如果有问题，就是找第一个人应该比找第二个人有效。比如文件的创建者由于各种原因，模块移交给了其他人或其他团队，后来因为新增需求，其他人在新增代码时，添加 <code>@author</code> 标识应该把自己的名字添加在创建人的前面。</p>
<p><code>@author</code> 中的名字不允许被删除。任何劳动成果都应该被尊重。</p>
<p>业务项目中，一个文件可能被多人频繁修改，并且每个人的维护时间都可能不会很长，不建议为文件增加 <code>@author</code> 标识。通过版本控制系统追踪变更，按业务逻辑单元确定模块的维护责任人，通过文档与wiki跟踪和查询，是更好的责任管理方式。</p>
<p>对于业务逻辑无关的技术型基础项目，特别是开源的公共项目，应使用 <code>@author</code> 标识。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@file </span>Describe the file</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author <span class="variable">author</span></span>-name(mail-name<span class="doctag">@domain</span>.com)</span></span><br><span class="line"><span class="comment"> *         author-name2(mail-name2<span class="doctag">@domain</span>.com)</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></table></figure>

<h4 id="命名空间注释"><a href="#命名空间注释" class="headerlink" title="命名空间注释"></a>命名空间注释</h4><h5 id="建议-命名空间使用-namespace-标识"><a href="#建议-命名空间使用-namespace-标识" class="headerlink" title="[建议] 命名空间使用 @namespace 标识"></a>[建议] 命名空间使用 <code>@namespace</code> 标识</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@namespace</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> util = &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="类注释"><a href="#类注释" class="headerlink" title="类注释"></a>类注释</h4><h5 id="建议-使用-class-标记类或构造函数"><a href="#建议-使用-class-标记类或构造函数" class="headerlink" title="[建议] 使用 @class 标记类或构造函数"></a>[建议] 使用 <code>@class</code> 标记类或构造函数</h5><p>解释：</p>
<p>对于使用对象 <code>constructor</code> 属性来定义的构造函数，可以使用 <code>@constructor</code> 来标记。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Developer</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// constructor body</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-使用-extends-标记类的继承信息"><a href="#建议-使用-extends-标记类的继承信息" class="headerlink" title="[建议] 使用 @extends 标记类的继承信息"></a>[建议] 使用 <code>@extends</code> 标记类的继承信息</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@extends <span class="variable">Developer</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Fronteer</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    Developer.call(<span class="built_in">this</span>);</span><br><span class="line">    <span class="comment">// constructor body</span></span><br><span class="line">&#125;</span><br><span class="line">util.inherits(Fronteer, Developer);</span><br></pre></td></tr></table></figure>

<h5 id="强制-使用包装方式扩展类成员时，-必须通过-lends-进行重新指向"><a href="#强制-使用包装方式扩展类成员时，-必须通过-lends-进行重新指向" class="headerlink" title="[强制] 使用包装方式扩展类成员时， 必须通过 @lends 进行重新指向"></a>[强制] 使用包装方式扩展类成员时， 必须通过 <code>@lends</code> 进行重新指向</h5><p>解释：</p>
<p>没有 <code>@lends</code> 标记将无法为该类生成包含扩展类成员的文档。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 类描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@extends <span class="variable">Developer</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Fronteer</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    Developer.call(<span class="built_in">this</span>);</span><br><span class="line">    <span class="comment">// constructor body</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">util.extend(</span><br><span class="line">    Fronteer.prototype,</span><br><span class="line">    <span class="comment">/** <span class="doctag">@lends </span>Fronteer.prototype */</span>&#123;</span><br><span class="line">        getLevel: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// TODO</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="强制-类的属性或方法等成员信息不是-public-的，应使用-protected-或-private-标识可访问性"><a href="#强制-类的属性或方法等成员信息不是-public-的，应使用-protected-或-private-标识可访问性" class="headerlink" title="[强制] 类的属性或方法等成员信息不是 public 的，应使用 @protected 或 @private 标识可访问性"></a>[强制] 类的属性或方法等成员信息不是 <code>public</code> 的，应使用 <code>@protected</code> 或 <code>@private</code> 标识可访问性</h5><p>解释：</p>
<p>生成的文档中将有可访问性的标记，避免用户直接使用非 <code>public</code> 的属性或方法。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 类描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@class</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@extends <span class="variable">Developer</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> Fronteer = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    Developer.call(<span class="built_in">this</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 属性描述</span></span><br><span class="line"><span class="comment">     *</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@type <span class="type">&#123;string&#125;</span></span></span></span><br><span class="line"><span class="comment">     * <span class="doctag">@private</span></span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="built_in">this</span>.level = <span class="string">&#x27;T12&#x27;</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// constructor body</span></span><br><span class="line">&#125;;</span><br><span class="line">util.inherits(Fronteer, Developer);</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 方法描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@private</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;string&#125;</span> </span>返回值描述</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">Fronteer.prototype.getLevel = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="函数-方法注释"><a href="#函数-方法注释" class="headerlink" title="函数/方法注释"></a>函数/方法注释</h4><h5 id="强制-函数-方法注释必须包含函数说明，有参数和返回值时必须使用注释标识"><a href="#强制-函数-方法注释必须包含函数说明，有参数和返回值时必须使用注释标识" class="headerlink" title="[强制] 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识"></a>[强制] 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识</h5><p>解释：</p>
<p>当 <code>return</code> 关键字仅作退出函数/方法使用时，无须对返回值作注释标识。</p>
<h5 id="强制-参数和返回值注释必须包含类型信息，且不允许省略参数的说明"><a href="#强制-参数和返回值注释必须包含类型信息，且不允许省略参数的说明" class="headerlink" title="[强制] 参数和返回值注释必须包含类型信息，且不允许省略参数的说明"></a>[强制] 参数和返回值注释必须包含类型信息，且不允许省略参数的说明</h5><h5 id="建议-当函数是内部函数，外部不可访问时，可以使用-inner-标识"><a href="#建议-当函数是内部函数，外部不可访问时，可以使用-inner-标识" class="headerlink" title="[建议] 当函数是内部函数，外部不可访问时，可以使用 @inner 标识"></a>[建议] 当函数是内部函数，外部不可访问时，可以使用 <code>@inner</code> 标识</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 函数描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>p1 参数1的说明</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>p2 参数2的说明，比较长</span></span><br><span class="line"><span class="comment"> *     那就换行了.</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;number=&#125;</span> </span>p3 参数3的说明（可选）</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;Object&#125;</span> </span>返回值描述</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">p1, p2, p3</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> p3 = p3 || <span class="number">10</span>;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        p1: p1,</span><br><span class="line">        p2: p2,</span><br><span class="line">        p3: p3</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-对-Object-中各项的描述，-必须使用-param-标识"><a href="#强制-对-Object-中各项的描述，-必须使用-param-标识" class="headerlink" title="[强制] 对 Object 中各项的描述， 必须使用 @param 标识"></a>[强制] 对 Object 中各项的描述， 必须使用 <code>@param</code> 标识</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 函数描述</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>option 参数描述</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>option.url option项描述</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string=&#125;</span> </span>option.method option项描述，可选参数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">option</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// TODO</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-重写父类方法时，-应当添加-override-标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略-param、-return，仅用-override-标识，否则仍应作完整注释"><a href="#建议-重写父类方法时，-应当添加-override-标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略-param、-return，仅用-override-标识，否则仍应作完整注释" class="headerlink" title="[建议] 重写父类方法时， 应当添加 @override 标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略 @param、@return，仅用 @override 标识，否则仍应作完整注释"></a>[建议] 重写父类方法时， 应当添加 <code>@override</code> 标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略 <code>@param</code>、<code>@return</code>，仅用 <code>@override</code> 标识，否则仍应作完整注释</h5><p>解释：</p>
<p>简而言之，当子类重写的方法能直接套用父类的方法注释时可省略对参数与返回值的注释。</p>
<h4 id="事件注释"><a href="#事件注释" class="headerlink" title="事件注释"></a>事件注释</h4><h5 id="强制-必须使用-event-标识事件，事件参数的标识与方法描述的参数标识相同"><a href="#强制-必须使用-event-标识事件，事件参数的标识与方法描述的参数标识相同" class="headerlink" title="[强制] 必须使用 @event 标识事件，事件参数的标识与方法描述的参数标识相同"></a>[强制] 必须使用 <code>@event</code> 标识事件，事件参数的标识与方法描述的参数标识相同</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 值变更时触发</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@event </span>Select#change</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>e e描述</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.before before描述</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.after after描述</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="built_in">this</span>.fire(</span><br><span class="line">    <span class="string">&#x27;change&#x27;</span>,</span><br><span class="line">    &#123;</span><br><span class="line">        before: <span class="string">&#x27;foo&#x27;</span>,</span><br><span class="line">        after: <span class="string">&#x27;bar&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="强制-在会广播事件的函数前使用-fires-标识广播的事件，在广播事件代码前使用-event-标识事件"><a href="#强制-在会广播事件的函数前使用-fires-标识广播的事件，在广播事件代码前使用-event-标识事件" class="headerlink" title="[强制] 在会广播事件的函数前使用 @fires 标识广播的事件，在广播事件代码前使用 @event 标识事件"></a>[强制] 在会广播事件的函数前使用 <code>@fires</code> 标识广播的事件，在广播事件代码前使用 <code>@event</code> 标识事件</h5><h5 id="建议-对于事件对象的注释，使用-param-标识，生成文档时可读性更好"><a href="#建议-对于事件对象的注释，使用-param-标识，生成文档时可读性更好" class="headerlink" title="[建议] 对于事件对象的注释，使用 @param 标识，生成文档时可读性更好"></a>[建议] 对于事件对象的注释，使用 <code>@param</code> 标识，生成文档时可读性更好</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 点击处理</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@fires </span>Select#change</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@private</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">Select.prototype.clickHandler = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 值变更时触发</span></span><br><span class="line"><span class="comment">     *</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@event </span>Select#change</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>e e描述</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.before before描述</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>e.after after描述</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="built_in">this</span>.fire(</span><br><span class="line">        <span class="string">&#x27;change&#x27;</span>,</span><br><span class="line">        &#123;</span><br><span class="line">            before: <span class="string">&#x27;foo&#x27;</span>,</span><br><span class="line">            after: <span class="string">&#x27;bar&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="常量注释"><a href="#常量注释" class="headerlink" title="常量注释"></a>常量注释</h4><h5 id="强制-常量必须使用-const-标记，并包含说明和类型信息"><a href="#强制-常量必须使用-const-标记，并包含说明和类型信息" class="headerlink" title="[强制] 常量必须使用 @const 标记，并包含说明和类型信息"></a>[强制] 常量必须使用 <code>@const</code> 标记，并包含说明和类型信息</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 常量说明</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@const</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@type <span class="type">&#123;string&#125;</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> REQUEST_URL = <span class="string">&#x27;myurl.do&#x27;</span>;</span><br></pre></td></tr></table></figure>

<h4 id="复杂类型注释"><a href="#复杂类型注释" class="headerlink" title="复杂类型注释"></a>复杂类型注释</h4><h5 id="建议-对于类型未定义的复杂结构的注释，可以使用-typedef-标识来定义"><a href="#建议-对于类型未定义的复杂结构的注释，可以使用-typedef-标识来定义" class="headerlink" title="[建议] 对于类型未定义的复杂结构的注释，可以使用 @typedef 标识来定义"></a>[建议] 对于类型未定义的复杂结构的注释，可以使用 <code>@typedef</code> 标识来定义</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// `namespaceA~` 可以换成其它 namepaths 前缀，目的是为了生成文档中能显示 `@typedef` 定义的类型和链接。</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 服务器</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@typedef <span class="type">&#123;Object&#125;</span> </span>namespaceA~Server</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@property <span class="type">&#123;string&#125;</span> </span>host 主机</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@property <span class="type">&#123;number&#125;</span> </span>port 端口</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 服务器列表</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@type <span class="type">&#123;Array.&lt;namespaceA~Server&gt;&#125;</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> servers = [</span><br><span class="line">    &#123;</span><br><span class="line">        host: <span class="string">&#x27;1.2.3.4&#x27;</span>,</span><br><span class="line">        port: <span class="number">8080</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        host: <span class="string">&#x27;1.2.3.5&#x27;</span>,</span><br><span class="line">        port: <span class="number">8081</span></span><br><span class="line">    &#125;</span><br><span class="line">];</span><br></pre></td></tr></table></figure>

<h4 id><a href="#" class="headerlink" title></a></h4><h4 id="细节注释"><a href="#细节注释" class="headerlink" title="细节注释"></a>细节注释</h4><p>对于内部实现、不容易理解的逻辑说明、摘要信息等，我们可能需要编写细节注释。</p>
<h4 id="建议-细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始"><a href="#建议-细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始" class="headerlink" title="[建议] 细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始"></a>[建议] 细节注释遵循单行注释的格式。说明必须换行时，每行是一个单行注释的起始</h4><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">p1, p2, opt_p3</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 这里对具体内部逻辑进行说明</span></span><br><span class="line">    <span class="comment">// 说明太长需要换行</span></span><br><span class="line">    <span class="keyword">for</span> (...) &#123;</span><br><span class="line">        ....</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记"><a href="#强制-有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记" class="headerlink" title="[强制] 有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记"></a>[强制] 有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记</h5><p>解释：</p>
<ol>
<li>TODO: 有功能待实现。此时需要对将要实现的功能进行简单说明。</li>
<li>FIXME: 该处代码运行没问题，但可能由于时间赶或者其他原因，需要修正。此时需要对如何修正进行简单说明。</li>
<li>HACK: 为修正某些问题而写的不太好或者使用了某些诡异手段的代码。此时需要对思路或诡异手段进行描述。</li>
<li>XXX: 该处存在陷阱。此时需要对陷阱进行描述。</li>
</ol>
<h2 id="语言特性"><a href="#语言特性" class="headerlink" title="语言特性"></a>语言特性</h2><h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3><h4 id="强制-变量、函数在使用前必须先定义"><a href="#强制-变量、函数在使用前必须先定义" class="headerlink" title="[强制] 变量、函数在使用前必须先定义"></a>[强制] 变量、函数在使用前必须先定义</h4><p>解释：</p>
<p>不通过 var 定义变量将导致变量污染全局环境。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">&#x27;MyName&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">name = <span class="string">&#x27;MyName&#x27;</span>;</span><br></pre></td></tr></table></figure>

<p>原则上不建议使用全局变量，对于已有的全局变量或第三方框架引入的全局变量，需要根据检查工具的语法标识。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* globals jQuery */</span></span><br><span class="line"><span class="keyword">var</span> element = jQuery(<span class="string">&#x27;#element-id&#x27;</span>);</span><br></pre></td></tr></table></figure>

<h4 id="强制-使用-let-和-const-定义变量，不使用-var"><a href="#强制-使用-let-和-const-定义变量，不使用-var" class="headerlink" title="[强制] 使用 let 和 const 定义变量，不使用 var"></a>[强制] 使用 <code>let</code> 和 <code>const</code> 定义变量，不使用 <code>var</code></h4><p>解释：</p>
<p>使用 <code>let</code> 和 <code>const</code> 定义时，变量作用域范围更明确。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-变量必须-即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量"><a href="#强制-变量必须-即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量" class="headerlink" title="[强制] 变量必须 即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量"></a>[强制] 变量必须 <code>即用即声明</code>，不得在函数或其它形式的代码块起始位置统一声明所有变量</h4><p>解释：</p>
<p>变量声明与使用的距离越远，出现的跨度越大，代码的阅读与维护成本越高。虽然JavaScript的变量是函数作用域，还是应该根据编程中的意图，缩小变量出现的距离空间。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">kv2List</span>(<span class="params">source</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> list = [];</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> source) &#123;</span><br><span class="line">        <span class="keyword">if</span> (source.hasOwnProperty(key)) &#123;</span><br><span class="line">            <span class="keyword">var</span> item = &#123;</span><br><span class="line">                k: key,</span><br><span class="line">                v: source[key]</span><br><span class="line">            &#125;;</span><br><span class="line"></span><br><span class="line">            list.push(item);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> list;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">kv2List</span>(<span class="params">source</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> list = [];</span><br><span class="line">    <span class="keyword">var</span> key;</span><br><span class="line">    <span class="keyword">var</span> item;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (key <span class="keyword">in</span> source) &#123;</span><br><span class="line">        <span class="keyword">if</span> (source.hasOwnProperty(key)) &#123;</span><br><span class="line">            item = &#123;</span><br><span class="line">                k: key,</span><br><span class="line">                v: source[key]</span><br><span class="line">            &#125;;</span><br><span class="line"></span><br><span class="line">            list.push(item);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> list;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="解构"><a href="#解构" class="headerlink" title="解构"></a>解构</h3><h4 id="强制-不要使用3层及以上的解构"><a href="#强制-不要使用3层及以上的解构" class="headerlink" title="[强制] 不要使用3层及以上的解构"></a>[强制] 不要使用3层及以上的解构</h4><p>解释：</p>
<p>过多层次的解构会让代码变得难以阅读。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">documentElement</span>: &#123;<span class="attr">firstElementChild</span>: &#123;nextSibling&#125;&#125;&#125; = <span class="built_in">window</span>;</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用解构减少中间变量"><a href="#建议-使用解构减少中间变量" class="headerlink" title="[建议] 使用解构减少中间变量"></a>[建议] 使用解构减少中间变量</h4><p>解释：</p>
<p>常见场景如变量值交换，可能产生中间变量。这种场景推荐使用解构。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">[x, y] = [y, x];</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> temp = x;</span><br><span class="line">x = y;</span><br><span class="line">y = temp;</span><br></pre></td></tr></table></figure>

<h4 id="强制-仅定义一个变量时不允许使用解构"><a href="#强制-仅定义一个变量时不允许使用解构" class="headerlink" title="[强制] 仅定义一个变量时不允许使用解构"></a>[强制] 仅定义一个变量时不允许使用解构</h4><p>解释：</p>
<p>在这种场景下，使用解构将降低代码可读性。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> len = myString.length;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">length</span>: len&#125; = myString;</span><br></pre></td></tr></table></figure>

<h4 id="强制-如果不节省编写时产生的中间变量，解构表达式-号右边不允许是-ObjectLiteral-和-ArrayLiteral"><a href="#强制-如果不节省编写时产生的中间变量，解构表达式-号右边不允许是-ObjectLiteral-和-ArrayLiteral" class="headerlink" title="[强制] 如果不节省编写时产生的中间变量，解构表达式 = 号右边不允许是 ObjectLiteral 和 ArrayLiteral"></a>[强制] 如果不节省编写时产生的中间变量，解构表达式 <code>=</code> 号右边不允许是 <code>ObjectLiteral</code> 和 <code>ArrayLiteral</code></h4><p>解释：</p>
<p>在这种场景下，使用解构将降低代码可读性，通常也并无收益。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">first</span>: firstName, <span class="attr">last</span>: lastName&#125; = person;</span><br><span class="line"><span class="keyword">let</span> one = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> two = <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> [one, two] = [<span class="number">1</span>, <span class="number">2</span>];</span><br></pre></td></tr></table></figure>

<h4 id="强制-使用剩余运算符时，剩余运算符之前的所有元素必需具名"><a href="#强制-使用剩余运算符时，剩余运算符之前的所有元素必需具名" class="headerlink" title="[强制] 使用剩余运算符时，剩余运算符之前的所有元素必需具名"></a>[强制] 使用剩余运算符时，剩余运算符之前的所有元素必需具名</h4><p>解释：</p>
<p>剩余运算符之前的元素省略名称可能带来较大的程序阅读障碍。如果仅仅为了取数组后几项，请使用 <code>slice</code> 方法。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> [one, two, ...anyOther] = myArray;</span><br><span class="line"><span class="keyword">let</span> other = myArray.slice(<span class="number">3</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> [,,, ...other] = myArray;</span><br></pre></td></tr></table></figure>

<h3 id="条件"><a href="#条件" class="headerlink" title="条件"></a>条件</h3><h5 id="强制-在-Equality-Expression-中使用类型严格的-。仅当判断-null-或-undefined-时，允许使用-null"><a href="#强制-在-Equality-Expression-中使用类型严格的-。仅当判断-null-或-undefined-时，允许使用-null" class="headerlink" title="[强制] 在 Equality Expression 中使用类型严格的 ===。仅当判断 null 或 undefined 时，允许使用 == null"></a>[强制] 在 Equality Expression 中使用类型严格的 <code>===</code>。仅当判断 <code>null</code> 或 <code>undefined</code> 时，允许使用 <code>== null</code></h5><p>解释：</p>
<p>使用 <code>===</code> 可以避免等于判断中隐式的类型转换。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (age === <span class="number">30</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (age == <span class="number">30</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-尽可能使用简洁的表达式"><a href="#建议-尽可能使用简洁的表达式" class="headerlink" title="[建议] 尽可能使用简洁的表达式"></a>[建议] 尽可能使用简洁的表达式</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串为空</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (!name) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (name === <span class="string">&#x27;&#x27;</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串非空</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (name) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (name !== <span class="string">&#x27;&#x27;</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组非空</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (collection.length) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (collection.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 布尔不成立</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (!notTrue) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (notTrue === <span class="literal">false</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// null 或 undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">if</span> (noValue == <span class="literal">null</span>) &#123;</span><br><span class="line">  <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (noValue === <span class="literal">null</span> || <span class="keyword">typeof</span> noValue === <span class="string">&#x27;undefined&#x27;</span>) &#123;</span><br><span class="line">  <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-按执行频率排列分支的顺序"><a href="#建议-按执行频率排列分支的顺序" class="headerlink" title="[建议] 按执行频率排列分支的顺序"></a>[建议] 按执行频率排列分支的顺序</h5><p>解释：</p>
<p>按执行频率排列分支的顺序好处是：</p>
<ol>
<li>阅读的人容易找到最常见的情况，增加可读性。</li>
<li>提高执行效率。</li>
</ol>
<h5 id="建议-对于相同变量或表达式的多值条件，用-switch-代替-if"><a href="#建议-对于相同变量或表达式的多值条件，用-switch-代替-if" class="headerlink" title="[建议] 对于相同变量或表达式的多值条件，用 switch 代替 if"></a>[建议] 对于相同变量或表达式的多值条件，用 <code>switch</code> 代替 <code>if</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">switch</span> (<span class="keyword">typeof</span> variable) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;object&#x27;</span>:</span><br><span class="line">        <span class="comment">// ......</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;number&#x27;</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;boolean&#x27;</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;string&#x27;</span>:</span><br><span class="line">        <span class="comment">// ......</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> type = <span class="keyword">typeof</span> variable;</span><br><span class="line"><span class="keyword">if</span> (type === <span class="string">&#x27;object&#x27;</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span> (type === <span class="string">&#x27;number&#x27;</span> || type === <span class="string">&#x27;boolean&#x27;</span> || type === <span class="string">&#x27;string&#x27;</span>) &#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-如果函数或全局中的-else-块后没有任何语句，可以删除-else"><a href="#建议-如果函数或全局中的-else-块后没有任何语句，可以删除-else" class="headerlink" title="[建议] 如果函数或全局中的 else 块后没有任何语句，可以删除 else"></a>[建议] 如果函数或全局中的 <code>else</code> 块后没有任何语句，可以删除 <code>else</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (name) &#123;</span><br><span class="line">        <span class="keyword">return</span> name;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;unnamed&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (name) &#123;</span><br><span class="line">        <span class="keyword">return</span> name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;unnamed&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="循环"><a href="#循环" class="headerlink" title="循环"></a>循环</h3><h5 id="建议-不要在循环体中包含函数表达式，事先将函数提取到循环体外"><a href="#建议-不要在循环体中包含函数表达式，事先将函数提取到循环体外" class="headerlink" title="[建议] 不要在循环体中包含函数表达式，事先将函数提取到循环体外"></a>[建议] 不要在循环体中包含函数表达式，事先将函数提取到循环体外</h5><p>解释：</p>
<p>循环体中的函数表达式，运行过程中会生成循环次数个函数对象。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">clicker</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    addListener(element, <span class="string">&#x27;click&#x27;</span>, clicker);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    addListener(element, <span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-对循环内多次使用的不变值，在循环外用变量缓存"><a href="#建议-对循环内多次使用的不变值，在循环外用变量缓存" class="headerlink" title="[建议] 对循环内多次使用的不变值，在循环外用变量缓存"></a>[建议] 对循环内多次使用的不变值，在循环外用变量缓存</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> width = wrap.offsetWidth + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    element.style.width = width;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    element.style.width = wrap.offsetWidth + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-对有序集合进行遍历时，缓存-length"><a href="#建议-对有序集合进行遍历时，缓存-length" class="headerlink" title="[建议] 对有序集合进行遍历时，缓存 length"></a>[建议] 对有序集合进行遍历时，缓存 <code>length</code></h5><p>解释：</p>
<p>虽然现代浏览器都对数组长度进行了缓存，但对于一些宿主对象和老旧浏览器的数组对象，在每次 <code>length</code> 访问时会动态计算元素个数，此时缓存 <code>length</code> 能有效提高程序性能。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = elements.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[i];</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-对有序集合进行顺序无关的遍历时，使用逆序遍历"><a href="#建议-对有序集合进行顺序无关的遍历时，使用逆序遍历" class="headerlink" title="[建议] 对有序集合进行顺序无关的遍历时，使用逆序遍历"></a>[建议] 对有序集合进行顺序无关的遍历时，使用逆序遍历</h5><p>解释：</p>
<p>逆序遍历可以节省变量，代码比较优化。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> len = elements.length;</span><br><span class="line"><span class="keyword">while</span> (len--) &#123;</span><br><span class="line">    <span class="keyword">var</span> element = elements[len];</span><br><span class="line">    <span class="comment">// ......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="类型"><a href="#类型" class="headerlink" title="类型"></a>类型</h3><h4 id="类型检测"><a href="#类型检测" class="headerlink" title="类型检测"></a>类型检测</h4><h5 id="建议-类型检测优先使用-typeof。对象类型检测使用-instanceof。null-或-undefined-的检测使用-null"><a href="#建议-类型检测优先使用-typeof。对象类型检测使用-instanceof。null-或-undefined-的检测使用-null" class="headerlink" title="[建议] 类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null"></a>[建议] 类型检测优先使用 <code>typeof</code>。对象类型检测使用 <code>instanceof</code>。<code>null</code> 或 <code>undefined</code> 的检测使用 <code>== null</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// string</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">&#x27;string&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// number</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">&#x27;number&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// boolean</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">&#x27;boolean&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Function</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">&#x27;function&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Object</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">&#x27;object&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// RegExp</span></span><br><span class="line">variable <span class="keyword">instanceof</span> <span class="built_in">RegExp</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Array</span></span><br><span class="line">variable <span class="keyword">instanceof</span> <span class="built_in">Array</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// null</span></span><br><span class="line">variable === <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// null or undefined</span></span><br><span class="line">variable == <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// undefined</span></span><br><span class="line"><span class="keyword">typeof</span> variable === <span class="string">&#x27;undefined&#x27;</span></span><br></pre></td></tr></table></figure>

<h4 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h4><h5 id="建议-转换成-string-时，使用-39-39"><a href="#建议-转换成-string-时，使用-39-39" class="headerlink" title="[建议] 转换成 string 时，使用 + &#39;&#39;"></a>[建议] 转换成 <code>string</code> 时，使用 <code>+ &#39;&#39;</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">num + <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">String</span>(num);</span><br><span class="line">num.toString();</span><br><span class="line"><span class="built_in">String</span>(num);</span><br></pre></td></tr></table></figure>

<h5 id="建议-转换成-number-时，通常使用"><a href="#建议-转换成-number-时，通常使用" class="headerlink" title="[建议] 转换成 number 时，通常使用 +"></a>[建议] 转换成 <code>number</code> 时，通常使用 <code>+</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">+str;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="built_in">Number</span>(str);</span><br></pre></td></tr></table></figure>

<h5 id="建议-string-转换成-number，要转换的字符串结尾包含非数字并期望忽略时，使用-parseInt"><a href="#建议-string-转换成-number，要转换的字符串结尾包含非数字并期望忽略时，使用-parseInt" class="headerlink" title="[建议] string 转换成 number，要转换的字符串结尾包含非数字并期望忽略时，使用 parseInt"></a>[建议] <code>string</code> 转换成 <code>number</code>，要转换的字符串结尾包含非数字并期望忽略时，使用 <code>parseInt</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> width = <span class="string">&#x27;200px&#x27;</span>;</span><br><span class="line"><span class="built_in">parseInt</span>(width, <span class="number">10</span>);</span><br></pre></td></tr></table></figure>

<h5 id="强制-使用-parseInt-时，必须指定进制"><a href="#强制-使用-parseInt-时，必须指定进制" class="headerlink" title="[强制] 使用 parseInt 时，必须指定进制"></a>[强制] 使用 <code>parseInt</code> 时，必须指定进制</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="built_in">parseInt</span>(str, <span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="built_in">parseInt</span>(str);</span><br></pre></td></tr></table></figure>

<h5 id="建议-转换成-boolean-时，使用"><a href="#建议-转换成-boolean-时，使用" class="headerlink" title="[建议] 转换成 boolean 时，使用 !!"></a>[建议] 转换成 <code>boolean</code> 时，使用 <code>!!</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">3.14</span>;</span><br><span class="line">!!num;</span><br></pre></td></tr></table></figure>

<h5 id="建议-number-去除小数点，使用-Math-floor-Math-round-Math-ceil，不使用-parseInt"><a href="#建议-number-去除小数点，使用-Math-floor-Math-round-Math-ceil，不使用-parseInt" class="headerlink" title="[建议] number 去除小数点，使用 Math.floor / Math.round / Math.ceil，不使用 parseInt"></a>[建议] <code>number</code> 去除小数点，使用 <code>Math.floor</code> / <code>Math.round</code> / <code>Math.ceil</code>，不使用 <code>parseInt</code></h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">3.14</span>;</span><br><span class="line"><span class="built_in">Math</span>.ceil(num);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">3.14</span>;</span><br><span class="line"><span class="built_in">parseInt</span>(num, <span class="number">10</span>);</span><br></pre></td></tr></table></figure>

<h3 id="3-3-模板字符串"><a href="#3-3-模板字符串" class="headerlink" title="3.3 模板字符串"></a>3.3 模板字符串</h3><h4 id="强制-字符串内变量替换时，不要使用-2-次及以上的函数调用"><a href="#强制-字符串内变量替换时，不要使用-2-次及以上的函数调用" class="headerlink" title="[强制] 字符串内变量替换时，不要使用 2 次及以上的函数调用"></a>[强制] 字符串内变量替换时，不要使用 <code>2</code> 次及以上的函数调用</h4><p>解释：</p>
<p>在变量替换符内有太多的函数调用等复杂语法会导致可读性下降。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> fullName = getFullName(getFirstName(), getLastName());</span><br><span class="line"><span class="keyword">let</span> s = <span class="string">`Hello <span class="subst">$&#123;fullName&#125;</span>`</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> s = <span class="string">`Hello <span class="subst">$&#123;getFullName(getFirstName(), getLastName())&#125;</span>`</span>;</span><br></pre></td></tr></table></figure>

<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><h4 id="强制-使用对象字面量-创建新-Object"><a href="#强制-使用对象字面量-创建新-Object" class="headerlink" title="[强制] 使用对象字面量 {} 创建新 Object"></a>[强制] 使用对象字面量 <code>&#123;&#125;</code> 创建新 <code>Object</code></h4><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br></pre></td></tr></table></figure>

<h4 id="建议-对象创建时，如果一个对象的所有-属性-均可以不添加引号，建议所有-属性-不添加引号"><a href="#建议-对象创建时，如果一个对象的所有-属性-均可以不添加引号，建议所有-属性-不添加引号" class="headerlink" title="[建议] 对象创建时，如果一个对象的所有 属性 均可以不添加引号，建议所有 属性 不添加引号"></a>[建议] 对象创建时，如果一个对象的所有 <code>属性</code> 均可以不添加引号，建议所有 <code>属性</code> 不添加引号</h4><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">    name: <span class="string">&#x27;someone&#x27;</span>,</span><br><span class="line">    age: <span class="number">28</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="建议-对象创建时，如果任何一个-属性-需要添加引号，则所有-属性-建议添加-39"><a href="#建议-对象创建时，如果任何一个-属性-需要添加引号，则所有-属性-建议添加-39" class="headerlink" title="[建议] 对象创建时，如果任何一个 属性 需要添加引号，则所有 属性 建议添加 &#39;"></a>[建议] 对象创建时，如果任何一个 <code>属性</code> 需要添加引号，则所有 <code>属性</code> 建议添加 <code>&#39;</code></h4><p>解释：</p>
<p>如果属性不符合 Identifier 和 NumberLiteral 的形式，就需要以 StringLiteral 的形式提供。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">    <span class="string">&#x27;name&#x27;</span>: <span class="string">&#x27;someone&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;age&#x27;</span>: <span class="number">28</span>,</span><br><span class="line">    <span class="string">&#x27;more-info&#x27;</span>: <span class="string">&#x27;...&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">    name: <span class="string">&#x27;someone&#x27;</span>,</span><br><span class="line">    age: <span class="number">28</span>,</span><br><span class="line">    <span class="string">&#x27;more-info&#x27;</span>: <span class="string">&#x27;...&#x27;</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="强制-不允许修改和扩展任何原生对象和宿主对象的原型"><a href="#强制-不允许修改和扩展任何原生对象和宿主对象的原型" class="headerlink" title="[强制] 不允许修改和扩展任何原生对象和宿主对象的原型"></a>[强制] 不允许修改和扩展任何原生对象和宿主对象的原型</h4><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 以下行为绝对禁止</span></span><br><span class="line"><span class="built_in">String</span>.prototype.trim = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="建议-属性访问时，尽量使用"><a href="#建议-属性访问时，尽量使用" class="headerlink" title="[建议] 属性访问时，尽量使用 ."></a>[建议] 属性访问时，尽量使用 <code>.</code></h4><p>解释：</p>
<p>属性名符合 Identifier 的要求，就可以通过 <code>.</code> 来访问，否则就只能通过 <code>[expr]</code> 方式访问。</p>
<p>通常在 JavaScript 中声明的对象，属性命名是使用 Camel 命名法，用 <code>.</code> 来访问更清晰简洁。部分特殊的属性（比如来自后端的 JSON ），可能采用不寻常的命名方式，可以通过 <code>[expr]</code> 方式访问。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">info.age;</span><br><span class="line">info[<span class="string">&#x27;more-info&#x27;</span>];</span><br></pre></td></tr></table></figure>

<h4 id="建议-for-in-遍历对象时-使用-hasOwnProperty-过滤掉原型中的属性"><a href="#建议-for-in-遍历对象时-使用-hasOwnProperty-过滤掉原型中的属性" class="headerlink" title="[建议] for in 遍历对象时, 使用 hasOwnProperty 过滤掉原型中的属性"></a>[建议] <code>for in</code> 遍历对象时, 使用 <code>hasOwnProperty</code> 过滤掉原型中的属性</h4><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> newInfo = &#123;&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> info) &#123;</span><br><span class="line">    <span class="keyword">if</span> (info.hasOwnProperty(key)) &#123;</span><br><span class="line">        newInfo[key] = info[key];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写"><a href="#建议-定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写" class="headerlink" title="[建议] 定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写"></a>[建议] 定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写</h4><p>解释：</p>
<p>目的在于保持所有键值对声明的一致性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;x, y, z&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> foo2 = &#123;</span><br><span class="line">    x: <span class="number">1</span>,</span><br><span class="line">    y: <span class="number">2</span>,</span><br><span class="line">    z: z</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    x: x,</span><br><span class="line">    y: y,</span><br><span class="line">    z: z</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> foo2 = &#123;</span><br><span class="line">    x: <span class="number">1</span>,</span><br><span class="line">    y: <span class="number">2</span>,</span><br><span class="line">    z</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="强制-定义方法时使用-MethodDefinition-语法，不使用-PropertyName-FunctionExpression-语法"><a href="#强制-定义方法时使用-MethodDefinition-语法，不使用-PropertyName-FunctionExpression-语法" class="headerlink" title="[强制] 定义方法时使用 MethodDefinition 语法，不使用 PropertyName: FunctionExpression 语法"></a>[强制] 定义方法时使用 <code>MethodDefinition</code> 语法，不使用 <code>PropertyName: FunctionExpression</code> 语法</h4><p>解释：</p>
<p><code>MethodDefinition</code> 语法更清晰简洁。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    <span class="function"><span class="title">bar</span>(<span class="params">x, y</span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> x + y;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    bar: <span class="function"><span class="keyword">function</span> (<span class="params">x, y</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> x + y;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用-Object-keys-或-Object-entries-进行对象遍历"><a href="#建议-使用-Object-keys-或-Object-entries-进行对象遍历" class="headerlink" title="[建议] 使用 Object.keys 或 Object.entries 进行对象遍历"></a>[建议] 使用 <code>Object.keys</code> 或 <code>Object.entries</code> 进行对象遍历</h4><p>解释：</p>
<p>不建议使用 <code>for .. in</code> 进行对象的遍历，以避免遗漏 <code>hasOwnProperty</code> 产生的错误。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">of</span> <span class="built_in">Object</span>.keys(foo)) &#123;</span><br><span class="line">    <span class="keyword">let</span> value = foo[key];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [key, value] <span class="keyword">of</span> <span class="built_in">Object</span>.entries(foo)) &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-定义对象的方法不应使用箭头函数"><a href="#建议-定义对象的方法不应使用箭头函数" class="headerlink" title="[建议] 定义对象的方法不应使用箭头函数"></a>[建议] 定义对象的方法不应使用箭头函数</h4><p>解释：</p>
<p>箭头函数将 <code>this</code> 绑定到当前环境，在 <code>obj.method()</code> 调用时容易导致不期待的 <code>this</code>。除非明确需要绑定 <code>this</code>，否则不应使用箭头函数。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    <span class="function"><span class="title">bar</span>(<span class="params">x, y</span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> x + y;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    bar: <span class="function">(<span class="params">x, y</span>) =&gt;</span> x + y</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="建议-尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性"><a href="#建议-尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性" class="headerlink" title="[建议] 尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性"></a>[建议] 尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性</h4><p>解释：</p>
<p>在一个完整的字面量中声明所有的键值，而不需要将代码分散开来，有助于提升代码可读性。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">const</span> MY_KEY = <span class="string">&#x27;bar&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    [MY_KEY + <span class="string">&#x27;Hash&#x27;</span>]: <span class="number">123</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">const</span> MY_KEY = <span class="string">&#x27;bar&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> foo = &#123;&#125;;</span><br><span class="line">foo[MY_KEY + <span class="string">&#x27;Hash&#x27;</span>] = <span class="number">123</span>;</span><br></pre></td></tr></table></figure>

<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><h5 id="强制-使用数组字面量-创建新数组，除非想要创建的是指定长度的数组"><a href="#强制-使用数组字面量-创建新数组，除非想要创建的是指定长度的数组" class="headerlink" title="[强制] 使用数组字面量 [] 创建新数组，除非想要创建的是指定长度的数组"></a>[强制] 使用数组字面量 <code>[]</code> 创建新数组，除非想要创建的是指定长度的数组</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">var</span> arr = [];</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br></pre></td></tr></table></figure>

<h5 id="强制-遍历数组不使用-for-in"><a href="#强制-遍历数组不使用-for-in" class="headerlink" title="[强制] 遍历数组不使用 for in"></a>[强制] 遍历数组不使用 <code>for in</code></h5><p>解释：</p>
<p>数组对象可能存在数字以外的属性, 这种情况下 <code>for in</code> 不会得到正确结果。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里仅作演示, 实际中应使用 Object 类型</span></span><br><span class="line">arr.other = <span class="string">&#x27;other things&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 正确的遍历方式</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = arr.length; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 错误的遍历方式</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> arr) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="建议-不因为性能的原因自己实现数组排序功能，尽量使用数组的-sort-方法"><a href="#建议-不因为性能的原因自己实现数组排序功能，尽量使用数组的-sort-方法" class="headerlink" title="[建议] 不因为性能的原因自己实现数组排序功能，尽量使用数组的 sort 方法"></a>[建议] 不因为性能的原因自己实现数组排序功能，尽量使用数组的 <code>sort</code> 方法</h5><p>解释：</p>
<p>自己实现的常规排序算法，在性能上并不优于数组默认的 <code>sort</code> 方法。以下两种场景可以自己实现排序：</p>
<ol>
<li>需要稳定的排序算法，达到严格一致的排序结果。</li>
<li>数据特点鲜明，适合使用桶排。</li>
</ol>
<h5 id="建议-清空数组使用-length-0"><a href="#建议-清空数组使用-length-0" class="headerlink" title="[建议] 清空数组使用 .length = 0"></a>[建议] 清空数组使用 <code>.length = 0</code></h5><h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><h4 id="函数长度"><a href="#函数长度" class="headerlink" title="函数长度"></a>函数长度</h4><h5 id="建议-一个函数的长度控制在-50-行以内"><a href="#建议-一个函数的长度控制在-50-行以内" class="headerlink" title="[建议] 一个函数的长度控制在 50 行以内"></a>[建议] 一个函数的长度控制在 <code>50</code> 行以内</h5><p>解释：</p>
<p>将过多的逻辑单元混在一个大函数中，易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取，通过函数的调用来体现流程。</p>
<p>特定算法等不可分割的逻辑允许例外。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">syncViewStateOnUserAction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (x.checked) &#123;</span><br><span class="line">        y.checked = <span class="literal">true</span>;</span><br><span class="line">        z.value = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        y.checked = <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (a.value) &#123;</span><br><span class="line">        warning.innerText = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">        submitButton.disabled = <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        warning.innerText = <span class="string">&#x27;Please enter it&#x27;</span>;</span><br><span class="line">        submitButton.disabled = <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 直接阅读该函数会难以明确其主线逻辑，因此下方是一种更合理的表达方式：</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">syncViewStateOnUserAction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    syncXStateToView();</span><br><span class="line">    checkAAvailability();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">syncXStateToView</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    y.checked = x.checked;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (x.checked) &#123;</span><br><span class="line">        z.value = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">checkAAvailability</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (a.value) &#123;</span><br><span class="line">        clearWarnignForA();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        displayWarningForAMissing();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="参数设计"><a href="#参数设计" class="headerlink" title="参数设计"></a>参数设计</h4><h5 id="建议-一个函数的参数控制在-6-个以内"><a href="#建议-一个函数的参数控制在-6-个以内" class="headerlink" title="[建议] 一个函数的参数控制在 6 个以内"></a>[建议] 一个函数的参数控制在 <code>6</code> 个以内</h5><p>解释：</p>
<p>除去不定长参数以外，函数具备不同逻辑意义的参数建议控制在 <code>6</code> 个以内，过多参数会导致维护难度增大。</p>
<p>某些情况下，如使用 AMD Loader 的 <code>require</code> 加载多个模块时，其 <code>callback</code> 可能会存在较多参数，因此对函数参数的个数不做强制限制。</p>
<h5 id="建议-通过-options-参数传递非数据输入型参数"><a href="#建议-通过-options-参数传递非数据输入型参数" class="headerlink" title="[建议] 通过 options 参数传递非数据输入型参数"></a>[建议] 通过 <code>options</code> 参数传递非数据输入型参数</h5><p>解释：</p>
<p>有些函数的参数并不是作为算法的输入，而是对算法的某些分支条件判断之用，此类参数建议通过一个 <code>options</code> 参数传递。</p>
<p>如下函数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 移除某个元素</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Node&#125;</span> </span>element 需要移除的元素</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;boolean&#125;</span> </span>removeEventListeners 是否同时将所有注册在元素上的事件移除</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeElement</span>(<span class="params">element, removeEventListeners</span>) </span>&#123;</span><br><span class="line">    element.parent.removeChild(element);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (removeEventListeners) &#123;</span><br><span class="line">        element.clearEventListeners();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>可以转换为下面的签名：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 移除某个元素</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Node&#125;</span> </span>element 需要移除的元素</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;Object&#125;</span> </span>options 相关的逻辑配置</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param <span class="type">&#123;boolean&#125;</span> </span>options.removeEventListeners 是否同时将所有注册在元素上的事件移除</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeElement</span>(<span class="params">element, options</span>) </span>&#123;</span><br><span class="line">    element.parent.removeChild(element);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (options.removeEventListeners) &#123;</span><br><span class="line">        element.clearEventListeners();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这种模式有几个显著的优势：</p>
<ul>
<li><code>boolean</code> 型的配置项具备名称，从调用的代码上更易理解其表达的逻辑意义。</li>
<li>当配置项有增长时，无需无休止地增加参数个数，不会出现 <code>removeElement(element, true, false, false, 3)</code> 这样难以理解的调用代码。</li>
<li>当部分配置参数可选时，多个参数的形式非常难处理重载逻辑，而使用一个 options 对象只需判断属性是否存在，实现得以简化。</li>
</ul>
<h4 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h4><h5 id="建议-在适当的时候将闭包内大对象置为-null"><a href="#建议-在适当的时候将闭包内大对象置为-null" class="headerlink" title="[建议] 在适当的时候将闭包内大对象置为 null"></a>[建议] 在适当的时候将闭包内大对象置为 <code>null</code></h5><p>解释：</p>
<p>在 JavaScript 中，无需特别的关键词就可以使用闭包，一个函数可以任意访问在其定义的作用域外的变量。需要注意的是，函数的作用域是静态的，即在定义时决定，与调用的时机和方式没有任何关系。</p>
<p>闭包会阻止一些变量的垃圾回收，对于较老旧的 JavaScript 引擎，可能导致外部所有变量均无法回收。</p>
<p>首先一个较为明确的结论是，以下内容会影响到闭包内变量的回收：</p>
<ul>
<li>嵌套的函数中是否有使用该变量。</li>
<li>嵌套的函数中是否有 <strong>直接调用eval</strong>。</li>
<li>是否使用了 with 表达式。</li>
</ul>
<p>Chakra、V8 和 SpiderMonkey 将受以上因素的影响，表现出不尽相同又较为相似的回收策略，而 JScript.dll 和 Carakan 则完全没有这方面的优化，会完整保留整个 LexicalEnvironment 中的所有变量绑定，造成一定的内存消耗。</p>
<p>由于对闭包内变量有回收优化策略的 Chakra、V8 和 SpiderMonkey 引擎的行为较为相似，因此可以总结如下，当返回一个函数 <strong>fn</strong> 时：</p>
<ol>
<li>如果 <strong>fn</strong> 的 <code>[[Scope]]</code> 是 ObjectEnvironment（with 表达式生成 ObjectEnvironment，函数和 catch 表达式生成 DeclarativeEnvironment），则：<ol>
<li>如果是 V8 引擎，则退出全过程。</li>
<li>如果是 SpiderMonkey，则处理该 ObjectEnvironment 的外层 LexicalEnvironment。</li>
</ol>
</li>
<li>获取当前 LexicalEnvironment 下的所有类型为 Function 的对象，对于每一个 Function 对象，分析其 FunctionBody：<ol>
<li>如果 FunctionBody 中含有 <strong>直接调用 eval</strong>，则退出全过程。</li>
<li>否则得到所有的 Identifier。</li>
<li>对于每一个 Identifier，设其为 <strong>name</strong>，根据查找变量引用的规则，从 LexicalEnvironment 中找出名称为 <strong>name</strong> 的绑定 binding。</li>
<li>对 binding 添加 <strong>notSwap</strong> 属性，其值为 <code>true</code>。</li>
</ol>
</li>
<li>检查当前 LexicalEnvironment 中的每一个变量绑定，如果该绑定有 <strong>notSwap</strong> 属性且值为 <code>true</code>，则：<ol>
<li>如果是 V8 引擎，删除该绑定。</li>
<li>如果是 SpiderMonkey，将该绑定的值设为 <code>undefined</code>，将删除 <strong>notSwap</strong> 属性。</li>
</ol>
</li>
</ol>
<p>对于 Chakra 引擎，暂无法得知是按 V8 的模式还是按 SpiderMonkey 的模式进行。</p>
<p>如果有 <strong>非常庞大</strong> 的对象，且预计会在 <strong>老旧的引擎</strong> 中执行，则使用闭包时，注意将闭包不需要的对象置为空引用。</p>
<h5 id="建议-使用-IIFE-避免-Lift-效应"><a href="#建议-使用-IIFE-避免-Lift-效应" class="headerlink" title="[建议] 使用 IIFE 避免 Lift 效应"></a>[建议] 使用 <code>IIFE</code> 避免 <code>Lift 效应</code></h5><p>解释：</p>
<p>在引用函数外部变量时，函数执行时外部变量的值由运行时决定而非定义时，最典型的场景如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> tasks = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">    tasks[tasks.length] = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;Current cursor is at &#x27;</span> + i);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> len = tasks.length;</span><br><span class="line"><span class="keyword">while</span> (len--) &#123;</span><br><span class="line">    tasks[len]();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>以上代码对 tasks 中的函数的执行均会输出 <code>Current cursor is at 5</code>，往往不符合预期。</p>
<p>此现象称为 <strong>Lift 效应</strong> 。解决的方式是通过额外加上一层闭包函数，将需要的外部变量作为参数传递来解除变量的绑定关系：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> tasks = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">    <span class="comment">// 注意有一层额外的闭包</span></span><br><span class="line">    tasks[tasks.length] = (<span class="function"><span class="keyword">function</span> (<span class="params">i</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;Current cursor is at &#x27;</span> + i);</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;)(i);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> len = tasks.length;</span><br><span class="line"><span class="keyword">while</span> (len--) &#123;</span><br><span class="line">    tasks[len]();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="空函数"><a href="#空函数" class="headerlink" title="空函数"></a>空函数</h4><h5 id="建议-空函数不使用-new-Function-的形式"><a href="#建议-空函数不使用-new-Function-的形式" class="headerlink" title="[建议] 空函数不使用 new Function() 的形式"></a>[建议] 空函数不使用 <code>new Function()</code> 的形式</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> emptyFunction = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="建议-对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享"><a href="#建议-对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享" class="headerlink" title="[建议] 对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享"></a>[建议] 对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> EMPTY_FUNCTION = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyClass</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyClass.prototype.abstractMethod = EMPTY_FUNCTION;</span><br><span class="line">MyClass.prototype.hooks.before = EMPTY_FUNCTION;</span><br><span class="line">MyClass.prototype.hooks.after = EMPTY_FUNCTION;</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用变量默认语法代替基于条件判断的默认值声明"><a href="#建议-使用变量默认语法代替基于条件判断的默认值声明" class="headerlink" title="[建议] 使用变量默认语法代替基于条件判断的默认值声明"></a>[建议] 使用变量默认语法代替基于条件判断的默认值声明</h4><p>解释：</p>
<p>添加默认值有助于引擎的优化，在未来 <code>strong mode</code> 下也会有更好的效果。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">text = <span class="string">&#x27;hello&#x27;</span></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">text</span>) </span>&#123;</span><br><span class="line">    text = text || <span class="string">&#x27;hello&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="强制-不要使用-arguments-对象，应使用-args-代替"><a href="#强制-不要使用-arguments-对象，应使用-args-代替" class="headerlink" title="[强制] 不要使用 arguments 对象，应使用 ...args 代替"></a>[强制] 不要使用 <code>arguments</code> 对象，应使用 <code>...args</code> 代替</h4><p>解释：</p>
<p>在未来 <code>strong mode</code> 下 <code>arguments</code> 将被禁用。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(args.join(<span class="string">&#x27;&#x27;</span>));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log([].join.call(<span class="built_in">arguments</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><h4 id="强制-使用-class-关键字定义一个类"><a href="#强制-使用-class-关键字定义一个类" class="headerlink" title="[强制] 使用 class 关键字定义一个类"></a>[强制] 使用 <code>class</code> 关键字定义一个类</h4><p>解释：</p>
<p>直接使用 <code>class</code> 定义类更清晰。不要再使用 <code>function</code> 和 <code>prototype</code> 形式的定义。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TextNode</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">value, engine</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.value = value;</span><br><span class="line">        <span class="built_in">this</span>.engine = engine;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">clone</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">TextNode</span>(<span class="params">value, engine</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.value = value;</span><br><span class="line">    <span class="built_in">this</span>.engine = engine;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">TextNode.prototype.clone = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="强制-使用-super-访问父类成员，而非父类的-prototype"><a href="#强制-使用-super-访问父类成员，而非父类的-prototype" class="headerlink" title="[强制] 使用 super 访问父类成员，而非父类的 prototype"></a>[强制] 使用 <code>super</code> 访问父类成员，而非父类的 <code>prototype</code></h4><p>解释：</p>
<p>使用 <code>super</code> 和 <code>super.foo</code> 可以快速访问父类成员，而不必硬编码父类模块而导致修改和维护的不便，同时更节省代码。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TextNode</span> <span class="keyword">extends</span> <span class="title">Node</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">value, engine</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>(value);</span><br><span class="line">        <span class="built_in">this</span>.engine = engine;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">setNodeValue</span>(<span class="params">value</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>.setNodeValue(value);</span><br><span class="line">        <span class="built_in">this</span>.textContent = value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TextNode</span> <span class="keyword">extends</span> <span class="title">Node</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">value, engine</span>)</span> &#123;</span><br><span class="line">        Node.apply(<span class="built_in">this</span>, <span class="built_in">arguments</span>);</span><br><span class="line">        <span class="built_in">this</span>.engine = engine;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">setNodeValue</span>(<span class="params">value</span>)</span> &#123;</span><br><span class="line">        Node.prototype.setNodeValue.call(<span class="built_in">this</span>, value);</span><br><span class="line">        <span class="built_in">this</span>.textContent = value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-8-模块"><a href="#3-8-模块" class="headerlink" title="3.8 模块"></a>3.8 模块</h3><h4 id="强制-export-与内容定义放在一起"><a href="#强制-export-与内容定义放在一起" class="headerlink" title="[强制] export 与内容定义放在一起"></a>[强制] <code>export</code> 与内容定义放在一起</h4><p>解释：</p>
<p>何处声明要导出的东西，就在何处使用 <code>export</code> 关键字，不在声明后再统一导出。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> bar = <span class="number">3</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> bar = <span class="number">3</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;foo&#125;;</span><br><span class="line"><span class="keyword">export</span> &#123;bar&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="建议-相互之间无关联的内容使用命名导出"><a href="#建议-相互之间无关联的内容使用命名导出" class="headerlink" title="[建议] 相互之间无关联的内容使用命名导出"></a>[建议] 相互之间无关联的内容使用命名导出</h4><p>解释：</p>
<p>举个例子，工具对象中的各个方法，相互之间并没有强关联，通常外部会选择几个使用，则应该使用命名导出。</p>
<p>简而言之，当一个模块只扮演命名空间的作用时，使用命名导出。</p>
<h4 id="强制-所有-import-语句写在模块开始处"><a href="#强制-所有-import-语句写在模块开始处" class="headerlink" title="[强制] 所有 import 语句写在模块开始处"></a>[强制] 所有 <code>import</code> 语句写在模块开始处</h4><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">import</span> &#123;bar&#125; <span class="keyword">from</span> <span class="string">&#x27;./bar&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    bar.work();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">import</span> &#123;bar&#125; <span class="keyword">from</span> <span class="string">&#x27;./bar&#x27;</span>;</span><br><span class="line">    bar.work();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="集合"><a href="#集合" class="headerlink" title="集合"></a>集合</h3><h4 id="建议-对数组进行连接操作时，使用数组展开语法"><a href="#建议-对数组进行连接操作时，使用数组展开语法" class="headerlink" title="[建议] 对数组进行连接操作时，使用数组展开语法"></a>[建议] 对数组进行连接操作时，使用数组展开语法</h4><p>解释：</p>
<p>用数组展开代替 <code>concat</code> 方法，数组展开对 <code>Iterable</code> 有更好的兼容性。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> foo = [...foo, newValue];</span><br><span class="line"><span class="keyword">let</span> bar = [...bar, ...newValues];</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> foo = foo.concat(newValue);</span><br><span class="line"><span class="keyword">let</span> bar = bar.concat(newValues);</span><br></pre></td></tr></table></figure>

<h4 id="建议-不要使用数组展开进行数组的复制操作"><a href="#建议-不要使用数组展开进行数组的复制操作" class="headerlink" title="[建议] 不要使用数组展开进行数组的复制操作"></a>[建议] 不要使用数组展开进行数组的复制操作</h4><p>解释：</p>
<p>使用数组展开语法进行复制，代码可读性较差。推荐使用 <code>Array.from</code> 方法进行复制操作。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> otherArr = <span class="built_in">Array</span>.from(arr);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> otherArr = [...arr];</span><br></pre></td></tr></table></figure>

<h4 id="建议-尽可能使用-for-of-进行遍历"><a href="#建议-尽可能使用-for-of-进行遍历" class="headerlink" title="[建议] 尽可能使用 for .. of 进行遍历"></a>[建议] 尽可能使用 <code>for .. of</code> 进行遍历</h4><p>解释：</p>
<p>使用 <code>for .. of</code> 可以更好地接受任何的 <code>Iterable</code> 对象，如 <code>Map#values</code> 生成的迭代器，使得方法的通用性更强。</p>
<p>以下情况除外：</p>
<ol>
<li>遍历确实成为了性能瓶颈，需要使用原生 <code>for</code> 循环提升性能。</li>
<li>需要遍历过程中的索引。</li>
</ol>
<h4 id="强制-当键值有可能不是字符串时，必须使用-Map；当元素有可能不是字符串时，必须使用-Set"><a href="#强制-当键值有可能不是字符串时，必须使用-Map；当元素有可能不是字符串时，必须使用-Set" class="headerlink" title="[强制] 当键值有可能不是字符串时，必须使用 Map；当元素有可能不是字符串时，必须使用 Set"></a>[强制] 当键值有可能不是字符串时，必须使用 <code>Map</code>；当元素有可能不是字符串时，必须使用 <code>Set</code></h4><p>解释：</p>
<p>使用普通 Object，对非字符串类型的 <code>key</code>，需要自己实现序列化。并且运行过程中的对象变化难以通知 Object。</p>
<h4 id="建议-需要一个不可重复的集合时，应使用-Set"><a href="#建议-需要一个不可重复的集合时，应使用-Set" class="headerlink" title="[建议] 需要一个不可重复的集合时，应使用 Set"></a>[建议] 需要一个不可重复的集合时，应使用 <code>Set</code></h4><p>解释：</p>
<p>不要使用 <code>&#123;foo: true&#125;</code> 这样的普通 <code>Object</code>。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> members = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">&#x27;one&#x27;</span>, <span class="string">&#x27;two&#x27;</span>, <span class="string">&#x27;three&#x27;</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> members = &#123;</span><br><span class="line">    one: <span class="literal">true</span>,</span><br><span class="line">    two: <span class="literal">true</span>,</span><br><span class="line">    three: <span class="literal">true</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="建议-当需要遍历功能时，使用-Map-和-Set"><a href="#建议-当需要遍历功能时，使用-Map-和-Set" class="headerlink" title="[建议] 当需要遍历功能时，使用 Map 和 Set"></a>[建议] 当需要遍历功能时，使用 <code>Map</code> 和 <code>Set</code></h4><p>解释：</p>
<p><code>Map</code> 和 <code>Set</code> 是可遍历对象，能够方便地使用 <code>for...of</code> 遍历。不要使用使用普通 Object。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> membersAge = <span class="keyword">new</span> <span class="built_in">Map</span>([</span><br><span class="line">    [<span class="string">&#x27;one&#x27;</span>, <span class="number">10</span>],</span><br><span class="line">    [<span class="string">&#x27;two&#x27;</span>, <span class="number">20</span>],</span><br><span class="line">    [<span class="string">&#x27;three&#x27;</span>, <span class="number">30</span>]</span><br><span class="line">]);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [key, value] <span class="keyword">of</span> map) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> membersAge = &#123;</span><br><span class="line">    one: <span class="number">10</span>,</span><br><span class="line">    two: <span class="number">20</span>,</span><br><span class="line">    three: <span class="number">30</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> membersAge) &#123;</span><br><span class="line">    <span class="keyword">if</span> (membersAge.hasOwnProperty(key)) &#123;</span><br><span class="line">        <span class="keyword">let</span> value = membersAge[key];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-程序运行过程中有添加或移除元素的操作时，使用-Map-和-Set"><a href="#建议-程序运行过程中有添加或移除元素的操作时，使用-Map-和-Set" class="headerlink" title="[建议] 程序运行过程中有添加或移除元素的操作时，使用 Map 和 Set"></a>[建议] 程序运行过程中有添加或移除元素的操作时，使用 <code>Map</code> 和 <code>Set</code></h4><p>解释：</p>
<p>使用 <code>Map</code> 和 <code>Set</code>，程序的可理解性更好；普通 Object 的语义更倾向于表达固定的结构。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> membersAge = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line">membersAge.set(<span class="string">&#x27;one&#x27;</span>, <span class="number">10</span>);</span><br><span class="line">membersAge.set(<span class="string">&#x27;two&#x27;</span>, <span class="number">20</span>);</span><br><span class="line">membersAge.set(<span class="string">&#x27;three&#x27;</span>, <span class="number">30</span>);</span><br><span class="line">membersAge.delete(<span class="string">&#x27;one&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> membersAge = &#123;&#125;;</span><br><span class="line">membersAge.one = <span class="number">10</span>;</span><br><span class="line">membersAge.two = <span class="number">20</span>;</span><br><span class="line">membersAge.three = <span class="number">30</span>;</span><br><span class="line"><span class="keyword">delete</span> membersAge[<span class="string">&#x27;one&#x27;</span>];</span><br></pre></td></tr></table></figure>

<h3 id="异步"><a href="#异步" class="headerlink" title="异步"></a>异步</h3><h4 id="强制-回调函数的嵌套不得超过3层"><a href="#强制-回调函数的嵌套不得超过3层" class="headerlink" title="[强制] 回调函数的嵌套不得超过3层"></a>[强制] 回调函数的嵌套不得超过3层</h4><p>解释：</p>
<p>深层次的回调函数的嵌套会让代码变得难以阅读。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">getUser(userId, <span class="function"><span class="keyword">function</span> (<span class="params">user</span>) </span>&#123;</span><br><span class="line">    validateUser(user, <span class="function"><span class="keyword">function</span> (<span class="params">isValid</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (isValid) &#123;</span><br><span class="line">            saveReport(report, user, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                notice(<span class="string">&#x27;Saved!&#x27;</span>);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用-Promise-代替-callback"><a href="#建议-使用-Promise-代替-callback" class="headerlink" title="[建议] 使用 Promise 代替 callback"></a>[建议] 使用 <code>Promise</code> 代替 <code>callback</code></h4><p>解释：</p>
<p>相比 <code>callback</code>，使用 <code>Promise</code> 能够使复杂异步过程的代码更清晰。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> user;</span><br><span class="line">getUser(userId)</span><br><span class="line">    .then(<span class="function"><span class="keyword">function</span> (<span class="params">userObj</span>) </span>&#123;</span><br><span class="line">        user = userObj;</span><br><span class="line">        <span class="keyword">return</span> validateUser(user);</span><br><span class="line">    &#125;)</span><br><span class="line">    .then(<span class="function"><span class="keyword">function</span> (<span class="params">isValid</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (isValid) &#123;</span><br><span class="line">            <span class="keyword">return</span> saveReport(report, user);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">&#x27;Invalid!&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    .then(</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            notice(<span class="string">&#x27;Saved!&#x27;</span>);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">message</span>) </span>&#123;</span><br><span class="line">            notice(message);</span><br><span class="line">        &#125;</span><br><span class="line">    );</span><br></pre></td></tr></table></figure>

<h4 id="强制-使用标准的-Promise-API"><a href="#强制-使用标准的-Promise-API" class="headerlink" title="[强制] 使用标准的 Promise API"></a>[强制] 使用标准的 <code>Promise</code> API</h4><p>解释：</p>
<ol>
<li>不允许使用非标准的 <code>Promise</code> API，如 <code>jQuery</code> 的 <code>Deferred</code>、<code>Q.js</code> 的 <code>defer</code> 等。</li>
<li>不允许使用非标准的 <code>Promise</code> 扩展 API，如 <code>bluebird</code> 的 <code>Promise.any</code> 等。</li>
</ol>
<p>使用标准的 <code>Promise</code> API，当运行环境都支持时，可以把 Promise Lib 直接去掉。</p>
<h4 id="强制-不允许直接扩展-Promise-对象的-prototype"><a href="#强制-不允许直接扩展-Promise-对象的-prototype" class="headerlink" title="[强制] 不允许直接扩展 Promise 对象的 prototype"></a>[强制] 不允许直接扩展 <code>Promise</code> 对象的 <code>prototype</code></h4><p>解释：</p>
<p>理由和 <strong>不允许修改和扩展任何原生对象和宿主对象的原型</strong> 是一样的。如果想要使用更方便，可以用 utility 函数的形式。</p>
<h4 id="强制-不得为了编写的方便，将可以并行的IO过程串行化"><a href="#强制-不得为了编写的方便，将可以并行的IO过程串行化" class="headerlink" title="[强制] 不得为了编写的方便，将可以并行的IO过程串行化"></a>[强制] 不得为了编写的方便，将可以并行的IO过程串行化</h4><p>解释：</p>
<p>并行 IO 消耗时间约等于 IO 时间最大的那个过程，串行的话消耗时间将是所有过程的时间之和。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">requestData().then(<span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">    renderTags(data.tags);</span><br><span class="line">    renderArticles(data.articles);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">requestData</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> [tags, articles] = <span class="keyword">await</span> <span class="built_in">Promise</span>.all([</span><br><span class="line">        requestTags(),</span><br><span class="line">        requestArticles()</span><br><span class="line">    ]);</span><br><span class="line">    <span class="keyword">return</span> &#123;tags, articles&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">requestData</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> tags = <span class="keyword">await</span> requestTags();</span><br><span class="line">    <span class="keyword">let</span> articles = <span class="keyword">await</span> requestArticles();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(&#123;tags, articles&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用-async-await-代替-generator-co"><a href="#建议-使用-async-await-代替-generator-co" class="headerlink" title="[建议] 使用 async/await 代替 generator + co"></a>[建议] 使用 <code>async/await</code> 代替 <code>generator</code> + <code>co</code></h4><p>解释：</p>
<p>使用语言自身的能力可以使代码更清晰，也无需引入 <code>co</code> 库。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">addReport(report, userId).then(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        notice(<span class="string">&#x27;Saved!&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">message</span>) </span>&#123;</span><br><span class="line">        notice(message);</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">addReport</span>(<span class="params">report, userId</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> user = <span class="keyword">await</span> getUser(userId);</span><br><span class="line">    <span class="keyword">let</span> isValid = <span class="keyword">await</span> validateUser(user);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (isValid) &#123;</span><br><span class="line">        <span class="keyword">let</span> savePromise = saveReport(report, user);</span><br><span class="line">        <span class="keyword">return</span> savePromise();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">&#x27;Invalid&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addReport</span>(<span class="params">report, userId</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> co(<span class="function"><span class="keyword">function</span>* (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">let</span> user = <span class="keyword">yield</span> getUser(userId);</span><br><span class="line">        <span class="keyword">let</span> isValid = <span class="keyword">yield</span> validateUser(user);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (isValid) &#123;</span><br><span class="line">            <span class="keyword">let</span> savePromise = saveReport(report, user);</span><br><span class="line">            <span class="keyword">return</span> savePromise();</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">&#x27;Invalid&#x27;</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="动态特性"><a href="#动态特性" class="headerlink" title="动态特性"></a>动态特性</h3><h4 id="3-10-1-eval"><a href="#3-10-1-eval" class="headerlink" title="3.10.1 eval"></a>3.10.1 eval</h4><h5 id="强制-避免使用直接-eval-函数"><a href="#强制-避免使用直接-eval-函数" class="headerlink" title="[强制] 避免使用直接 eval 函数"></a>[强制] 避免使用直接 <code>eval</code> 函数</h5><p>解释：</p>
<p>直接 <code>eval</code>，指的是以函数方式调用 <code>eval</code> 的调用方法。直接 <code>eval</code> 调用执行代码的作用域为本地作用域，应当避免。</p>
<p>如果有特殊情况需要使用直接 <code>eval</code>，需在代码中用详细的注释说明为何必须使用直接 <code>eval</code>，不能使用其它动态执行代码的方式，同时需要其他资深工程师进行 Code Review。</p>
<h5 id="建议-尽量避免使用-eval-函数"><a href="#建议-尽量避免使用-eval-函数" class="headerlink" title="[建议] 尽量避免使用 eval 函数"></a>[建议] 尽量避免使用 <code>eval</code> 函数</h5><h4 id="3-10-2-动态执行代码"><a href="#3-10-2-动态执行代码" class="headerlink" title="3.10.2 动态执行代码"></a>3.10.2 动态执行代码</h4><h5 id="建议-使用-new-Function-执行动态代码"><a href="#建议-使用-new-Function-执行动态代码" class="headerlink" title="[建议] 使用 new Function 执行动态代码"></a>[建议] 使用 <code>new Function</code> 执行动态代码</h5><p>解释：</p>
<p>通过 <code>new Function</code> 生成的函数作用域是全局使用域，不会影响当当前的本地作用域。如果有动态代码执行的需求，建议使用 <code>new Function</code>。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> handler = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">&#x27;x&#x27;</span>, <span class="string">&#x27;y&#x27;</span>, <span class="string">&#x27;return x + y;&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> result = handler($(<span class="string">&#x27;#x&#x27;</span>).val(), $(<span class="string">&#x27;#y&#x27;</span>).val());</span><br></pre></td></tr></table></figure>

<h4 id="3-10-3-with"><a href="#3-10-3-with" class="headerlink" title="3.10.3 with"></a>3.10.3 with</h4><h5 id="建议-尽量不要使用-with"><a href="#建议-尽量不要使用-with" class="headerlink" title="[建议] 尽量不要使用 with"></a>[建议] 尽量不要使用 <code>with</code></h5><p>解释：</p>
<p>使用 <code>with</code> 可能会增加代码的复杂度，不利于阅读和管理；也会对性能有影响。大多数使用 <code>with</code> 的场景都能使用其他方式较好的替代。所以，尽量不要使用 <code>with</code>。</p>
<h4 id="3-10-4-delete"><a href="#3-10-4-delete" class="headerlink" title="3.10.4 delete"></a>3.10.4 delete</h4><h5 id="建议-减少-delete-的使用"><a href="#建议-减少-delete-的使用" class="headerlink" title="[建议] 减少 delete 的使用"></a>[建议] 减少 <code>delete</code> 的使用</h5><p>解释：</p>
<p>如果没有特别的需求，减少或避免使用 <code>delete</code>。<code>delete</code> 的使用会破坏部分 JavaScript 引擎的性能优化。</p>
<h5 id="建议-处理-delete-可能产生的异常"><a href="#建议-处理-delete-可能产生的异常" class="headerlink" title="[建议] 处理 delete 可能产生的异常"></a>[建议] 处理 <code>delete</code> 可能产生的异常</h5><p>解释：</p>
<p>对于有被遍历需求，且值 <code>null</code> 被认为具有业务逻辑意义的值的对象，移除某个属性必须使用 <code>delete</code> 操作。</p>
<p>在严格模式或 IE 下使用 <code>delete</code> 时，不能被删除的属性会抛出异常，因此在不确定属性是否可以删除的情况下，建议添加 <code>try-catch</code> 块。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">delete</span> o.x;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">catch</span> (deleteError) &#123;</span><br><span class="line">    o.x = <span class="literal">null</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="3-10-5-对象属性"><a href="#3-10-5-对象属性" class="headerlink" title="3.10.5 对象属性"></a>3.10.5 对象属性</h4><h5 id="建议-避免修改外部传入的对象"><a href="#建议-避免修改外部传入的对象" class="headerlink" title="[建议] 避免修改外部传入的对象"></a>[建议] 避免修改外部传入的对象</h5><p>解释：</p>
<p>JavaScript 因其脚本语言的动态特性，当一个对象未被 seal 或 freeze 时，可以任意添加、删除、修改属性值。</p>
<p>但是随意地对 非自身控制的对象 进行修改，很容易造成代码在不可预知的情况下出现问题。因此，设计良好的组件、函数应该避免对外部传入的对象的修改。</p>
<p>下面代码的 <strong>selectNode</strong> 方法修改了由外部传入的 <strong>datasource</strong> 对象。如果 <strong>datasource</strong> 用在其它场合（如另一个 Tree 实例）下，会造成状态的混乱。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Tree</span>(<span class="params">datasource</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.datasource = datasource;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Tree.prototype.selectNode = <span class="function"><span class="keyword">function</span> (<span class="params">id</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 从datasource中找出节点对象</span></span><br><span class="line">    <span class="keyword">var</span> node = <span class="built_in">this</span>.findNode(id);</span><br><span class="line">    <span class="keyword">if</span> (node) &#123;</span><br><span class="line">        node.selected = <span class="literal">true</span>;</span><br><span class="line">        <span class="built_in">this</span>.flushView();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>对于此类场景，需要使用额外的对象来维护，使用由自身控制，不与外部产生任何交互的 <strong>selectedNodeIndex</strong> 对象来维护节点的选中状态，不对 <strong>datasource</strong> 作任何修改。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Tree</span>(<span class="params">datasource</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.datasource = datasource;</span><br><span class="line">    <span class="built_in">this</span>.selectedNodeIndex = &#123;&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Tree.prototype.selectNode = <span class="function"><span class="keyword">function</span> (<span class="params">id</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 从datasource中找出节点对象</span></span><br><span class="line">    <span class="keyword">var</span> node = <span class="built_in">this</span>.findNode(id);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (node) &#123;</span><br><span class="line">        <span class="built_in">this</span>.selectedNodeIndex[id] = <span class="literal">true</span>;</span><br><span class="line">        <span class="built_in">this</span>.flushView();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>除此之外，也可以通过 deepClone 等手段将自身维护的对象与外部传入的分离，保证不会相互影响。</p>
<h5 id="建议-具备强类型的设计"><a href="#建议-具备强类型的设计" class="headerlink" title="[建议] 具备强类型的设计"></a>[建议] 具备强类型的设计</h5><p>解释：</p>
<ul>
<li>如果一个属性被设计为 <code>boolean</code> 类型，则不要使用 <code>1</code> 或 <code>0</code> 作为其值。对于标识性的属性，如对代码体积有严格要求，可以从一开始就设计为 <code>number</code> 类型且将 <code>0</code> 作为否定值。</li>
<li>从 DOM 中取出的值通常为 <code>string</code> 类型，如果有对象或函数的接收类型为 <code>number</code> 类型，提前作好转换，而不是期望对象、函数可以处理多类型的值。</li>
</ul>
<h2 id="浏览器环境"><a href="#浏览器环境" class="headerlink" title="浏览器环境"></a>浏览器环境</h2><h3 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h3><h4 id="元素获取"><a href="#元素获取" class="headerlink" title="元素获取"></a>元素获取</h4><h5 id="建议-对于单个元素，尽可能使用-document-getElementById-获取，避免使用document-all"><a href="#建议-对于单个元素，尽可能使用-document-getElementById-获取，避免使用document-all" class="headerlink" title="[建议] 对于单个元素，尽可能使用 document.getElementById 获取，避免使用document.all"></a>[建议] 对于单个元素，尽可能使用 <code>document.getElementById</code> 获取，避免使用<code>document.all</code></h5><h5 id="建议-对于多个元素的集合，尽可能使用-context-getElementsByTagName-获取。其中-context-可以为-document-或其他元素。指定-tagName-参数为-可以获得所有子元素"><a href="#建议-对于多个元素的集合，尽可能使用-context-getElementsByTagName-获取。其中-context-可以为-document-或其他元素。指定-tagName-参数为-可以获得所有子元素" class="headerlink" title="[建议] 对于多个元素的集合，尽可能使用 context.getElementsByTagName 获取。其中 context 可以为 document 或其他元素。指定 tagName 参数为 * 可以获得所有子元素"></a>[建议] 对于多个元素的集合，尽可能使用 <code>context.getElementsByTagName</code> 获取。其中 <code>context</code> 可以为 <code>document</code> 或其他元素。指定 <code>tagName</code> 参数为 <code>*</code> 可以获得所有子元素</h5><h5 id="建议-遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组"><a href="#建议-遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组" class="headerlink" title="[建议] 遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组"></a>[建议] 遍历元素集合时，尽量缓存集合长度。如需多次操作同一集合，则应将集合转为数组</h5><p>解释：</p>
<p>原生获取元素集合的结果并不直接引用 DOM 元素，而是对索引进行读取，所以 DOM 结构的改变会实时反映到结果中。</p>
<p>示例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> elements = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&#x27;*&#x27;</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="comment">// 显示为 DIV</span></span></span><br><span class="line">alert(elements[0].tagName);</span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> div = elements[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> p = <span class="built_in">document</span>.createElement(<span class="string">&#x27;p&#x27;</span>);</span></span><br><span class="line">docpment.body.insertBefore(p, div);</span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="comment">// 显示为 P</span></span></span><br><span class="line">alert(elements[0].tagName);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="建议-获取元素的直接子元素时使用-children。避免使用childNodes，除非预期是需要包含文本、注释和属性类型的节点"><a href="#建议-获取元素的直接子元素时使用-children。避免使用childNodes，除非预期是需要包含文本、注释和属性类型的节点" class="headerlink" title="[建议] 获取元素的直接子元素时使用 children。避免使用childNodes，除非预期是需要包含文本、注释和属性类型的节点"></a>[建议] 获取元素的直接子元素时使用 <code>children</code>。避免使用<code>childNodes</code>，除非预期是需要包含文本、注释和属性类型的节点</h5><h4 id="样式获取"><a href="#样式获取" class="headerlink" title="样式获取"></a>样式获取</h4><h5 id="建议-获取元素实际样式信息时，应使用-getComputedStyle-或-currentStyle"><a href="#建议-获取元素实际样式信息时，应使用-getComputedStyle-或-currentStyle" class="headerlink" title="[建议] 获取元素实际样式信息时，应使用 getComputedStyle 或 currentStyle"></a>[建议] 获取元素实际样式信息时，应使用 <code>getComputedStyle</code> 或 <code>currentStyle</code></h5><p>解释：</p>
<p>通过 style 只能获得内联定义或通过 JavaScript 直接设置的样式。通过 CSS class 设置的元素样式无法直接通过 style 获取。</p>
<h4 id="样式设置"><a href="#样式设置" class="headerlink" title="样式设置"></a>样式设置</h4><h5 id="建议-尽可能通过为元素添加预定义的-className-来改变元素样式，避免直接操作-style-设置"><a href="#建议-尽可能通过为元素添加预定义的-className-来改变元素样式，避免直接操作-style-设置" class="headerlink" title="[建议] 尽可能通过为元素添加预定义的 className 来改变元素样式，避免直接操作 style 设置"></a>[建议] 尽可能通过为元素添加预定义的 className 来改变元素样式，避免直接操作 style 设置</h5><h5 id="强制-通过-style-对象设置元素样式时，对于带单位非-0-值的属性，不允许省略单位"><a href="#强制-通过-style-对象设置元素样式时，对于带单位非-0-值的属性，不允许省略单位" class="headerlink" title="[强制] 通过 style 对象设置元素样式时，对于带单位非 0 值的属性，不允许省略单位"></a>[强制] 通过 style 对象设置元素样式时，对于带单位非 0 值的属性，不允许省略单位</h5><p>解释：</p>
<p>除了 IE，标准浏览器会忽略不规范的属性值，导致兼容性问题。</p>
<h4 id="DOM-操作"><a href="#DOM-操作" class="headerlink" title="DOM 操作"></a>DOM 操作</h4><h5 id="建议-操作-DOM-时，尽量减少页面-reflow"><a href="#建议-操作-DOM-时，尽量减少页面-reflow" class="headerlink" title="[建议] 操作 DOM 时，尽量减少页面 reflow"></a>[建议] 操作 <code>DOM</code> 时，尽量减少页面 <code>reflow</code></h5><p>解释：</p>
<p>页面 reflow 是非常耗时的行为，非常容易导致性能瓶颈。下面一些场景会触发浏览器的reflow：</p>
<ul>
<li>DOM元素的添加、修改（内容）、删除。</li>
<li>应用新的样式或者修改任何影响元素布局的属性。</li>
<li>Resize浏览器窗口、滚动页面。</li>
<li>读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 。</li>
</ul>
<h5 id="建议-尽量减少-DOM-操作"><a href="#建议-尽量减少-DOM-操作" class="headerlink" title="[建议] 尽量减少 DOM 操作"></a>[建议] 尽量减少 <code>DOM</code> 操作</h5><p>解释：</p>
<p>DOM 操作也是非常耗时的一种操作，减少 DOM 操作有助于提高性能。举一个简单的例子，构建一个列表。我们可以用两种方式：</p>
<ol>
<li>在循环体中 createElement 并 append 到父元素中。</li>
<li>在循环体中拼接 HTML 字符串，循环结束后写父元素的 innerHTML。</li>
</ol>
<p>第一种方法看起来比较标准，但是每次循环都会对 DOM 进行操作，性能极低。在这里推荐使用第二种方法。</p>
<h4 id="DOM-事件"><a href="#DOM-事件" class="headerlink" title="DOM 事件"></a>DOM 事件</h4><h5 id="建议-优先使用-addEventListener-attachEvent-绑定事件，避免直接在-HTML-属性中或-DOM-的-expando-属性绑定事件处理"><a href="#建议-优先使用-addEventListener-attachEvent-绑定事件，避免直接在-HTML-属性中或-DOM-的-expando-属性绑定事件处理" class="headerlink" title="[建议] 优先使用 addEventListener / attachEvent 绑定事件，避免直接在 HTML 属性中或 DOM 的 expando 属性绑定事件处理"></a>[建议] 优先使用 <code>addEventListener / attachEvent</code> 绑定事件，避免直接在 HTML 属性中或 DOM 的 <code>expando</code> 属性绑定事件处理</h5><p>解释：</p>
<p>expando 属性绑定事件容易导致互相覆盖。</p>
<h5 id="建议-使用-addEventListener-时第三个参数使用-false"><a href="#建议-使用-addEventListener-时第三个参数使用-false" class="headerlink" title="[建议] 使用 addEventListener 时第三个参数使用 false"></a>[建议] 使用 <code>addEventListener</code> 时第三个参数使用 <code>false</code></h5><p>解释：</p>
<p>标准浏览器中的 addEventListener 可以通过第三个参数指定两种时间触发模型：冒泡和捕获。而 IE 的 attachEvent 仅支持冒泡的事件触发。所以为了保持一致性，通常 addEventListener 的第三个参数都为 false。</p>
<h5 id="建议-在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器"><a href="#建议-在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器" class="headerlink" title="[建议] 在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器"></a>[建议] 在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器</h5><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
      </div>
      
      
      
    </div>

    
    


</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">郭泽</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>

  <script class="next-config" data-name="pdf" type="application/json">{"object_url":{"url":"https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js","integrity":"sha256-tu9j5pBilBQrWSDePOOajCUdz6hWsid/lBNzK4KgEPM="},"url":"/lib/pdf/web/viewer.html"}</script>
  <script src="/js/third-party/tags/pdf.js"></script>

  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.3/mermaid.min.js","integrity":"sha256-TIYL00Rhw/8WaoUhYTLX9SKIEFdXxg+yMWSLVUbhiLg="}}</script>
  <script src="/js/third-party/tags/mermaid.js"></script>

  <script src="/js/third-party/fancybox.js"></script>


  





</body>
</html>
